tabs实现
<template>
<div>
<div v-for="(item, index) in tabs"
:key="index"
class="coursespecialtyView-tabs-txt"
:class="{active: isActive(index)}"
@click="changeTab(item, index)">
{{ item.label }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [{label: '课程介绍', value: 0}, {label: '课程目录', value: 1}, {label: '版权证明', value: 2}],
active: 0,
}
},
methods: {
changeTab(item, index) {
this.active = index;
// TODO: 切换tab的相关操作
},
},
computed: {
isActive() {
return (index) => {
return this.active === index;
};
},
},
}
<style>
.tabs {
padding: 15px;
background: #e3ecf5;
display: flex;
align-items: center;
&-txt {
flex: none;
margin-right: 65px;
font-size: 16px;
color: #101010;
&.active {
position: relative;
color: #0060ff;
&::before {
content: '';
position: absolute;
left: 50%;
bottom: -10px;
transform: translateX(-50%);
width: 76px;
height: 6px;
border-radius: 5px;
background: #0060ff;
}
}
}
}
</style>首先我们看到的是计算属性的定义：
computed: {
isActive() {
return (index) => {
return this.active === index;
};
},
},这里的 isActive 会返回一个函数，这个函数的参数是索引值 index，返回值是当前索引值是否被选中，即布尔值。其中，箭头函数 (index) => {...} 是语法糖，相当于普通函数 function (index) {...}。这里的 return 语句是返回一个表达式，即 this.active === index，表示当前的索引值是否等于选中的索引值，如果相等则为 true，否则为 false。
接下来我们看下计算属性的使用：
:class="{active: isActive(index)}"这里的 :class 是 CSS 类绑定的语法糖，表示如果计算属性 isActive(index) 返回值为 true，则添加 CSS 类 active，否则不添加。而 isActive(index) 是通过当前迭代的 index 作为参数调用计算属性 isActive，传递给该计算属性的函数作为索引值，然后该函数返回当前索引值是否被选中的布尔值。
在这个过程中，使用箭头函数的目的是将 isActive 定义为函数返回函数的形式，这样我们可以在模板中使用 isActive(index) 的方式直接调用，而不需要在 methods 中定义相应的方法。这样做的好处是使代码更简洁，也更易于理解，同时也避免了在模板中定义方法的一些限制。
