vue2 实现tab选项卡

在Vue 2中，实现一个简单的Tab选项卡组件通常会用到`v-show`或`v-if`，配合`active-class`或`class绑定`。下面是一个基本的例子：

<template>
  <ul class="tabs">
    <li :class="{ active: isActive(tabIndex === 0) }" @click="setActive(0)">
      Tab 1
    </li>
    <li :class="{ active: isActive(tabIndex === 1) }" @click="setActive(1)">
      Tab 2
    </li>
    <li :class="{ active: isActive(tabIndex === 2) }" @click="setActive(2)">
      Tab 3
    </li>
  </ul>
  <div v-show="isActive(0)">
    Tab 1 Content
  </div>
  <div v-show="isActive(1)">
    Tab 2 Content
  </div>
  <div v-show="isActive(2)">
    Tab 3 Content
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabIndex: 0, // 初始选中的tab索引
    };
  },
  methods: {
    setActive(index) {
      this.tabIndex = index;
    },
    isActive(index) {
      return this.tabIndex === index;
    },
  },
};
</script>

在这个例子中，当用户点击不同的tab标签时，`setActive`方法会更新`tabIndex`，`isActive`方法则用于切换内容区域的显示。

每个li标签的`class`属性绑定了`active`值，当`tabIndex`匹配当前li的索引时，该li会被设置为激活状态，对应的内容区就会展示出来。