vue实现tab栏切换

在Vue中实现tab栏切换可以使用v-show或v-if指令来控制显示和隐藏不同的内容。具体步骤如下：

1. 定义data属性，用来存储当前选中的tab项的索引：

data() {
  return {
    activeIndex: 0 // 默认选中第一个tab项
  }
}

2. 在模板中使用v-for指令循环渲染所有的tab项，并使用v-bind指令动态绑定class属性，根据当前选中的tab项判断是否应用active样式：

<div class="tab">
  <div class="tab-nav">
    <div v-for="(item, index) in tabList"
         :key="index"
         :class="{ 'tab-active': activeIndex === index }"
         @click="activeIndex = index">{{ item }}</div>
  </div>
  <div class="tab-content">
    <div v-for="(item, index) in tabList"
         :key="index"
         v-show="activeIndex === index">{{ item.content }}</div>
  </div>
</div>

3. 在methods中定义处理选中tab项的方法：

methods: {
  setActiveIndex(index) {
    this.activeIndex = index
  }
}

4. 在模板中使用上述方法处理选中tab项的事件：

<div class="tab">
  <div class="tab-nav">
    <div v-for="(item, index) in tabList"
         :key="index"
         :class="{ 'tab-active': activeIndex === index }"
         @click="setActiveIndex(index)">{{ item }}</div>
  </div>
  <div class="tab-content">
    <div v-for="(item, index) in tabList"
         :key="index"
         v-show="activeIndex === index">{{ item.content }}</div>
  </div>
</div>