vue实现tab标签选中

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 中定义相应的方法。这样做的好处是使代码更简洁，也更易于理解，同时也避免了在模板中定义方法的一些限制。