Vue Tab 栏切换实现教程 - 使用 v-show 控制内容显示

在 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>