Vue实现tab选中效果

在前端开发中，tab切换效果是非常常见的交互设计。使用Vue框架可以轻松实现tab选中效果，为用户带来良好的操作体验。

我们需要在HTML模板中搭建基本的tab结构。可以使用无序列表 <ul> 和列表项 <li> 来创建tab导航栏。例如：

<ul>
  <li v-for="(tab, index) in tabList" :key="index" @click="selectTab(index)">{{ tab.title }}</li>
</ul>

这里通过 v-for 指令循环渲染tab列表，每个 li 项绑定了点击事件 selectTab，并传递当前tab的索引。

接下来，在Vue组件的 data 选项中定义数据。

data() {
  return {
    tabList: [
      { title: 'tab1', content: '这是tab1的内容' },
      { title: 'tab2', content: '这是tab2的内容' },
      { title: 'tab3', content: '这是tab3的内容' }
    ],
    currentIndex: 0
  }
}

tabList 数组存放了所有tab的信息，包括标题和内容，currentIndex 用于记录当前选中的tab索引。

然后，在 methods 选项中定义 selectTab 方法。

methods: {
  selectTab(index) {
    this.currentIndex = index;
  }
}

该方法接收点击的tab索引，并将其赋值给 currentIndex，从而实现tab的选中状态切换。

为了让选中的tab有视觉上的反馈，我们可以添加一些CSS样式。通过Vue的 :class 指令来动态绑定类名。

<ul>
  <li v-for="(tab, index) in tabList" :key="index" @click="selectTab(index)" :class="{ active: currentIndex === index }">{{ tab.title }}</li>
</ul>

CSS部分：

.active {
  color: red;
  /* 其他选中样式 */
}

这样，当某个tab被点击时，就会添加 active 类，从而显示出选中效果。

对于tab对应的内容展示，同样可以通过 v-for 和 v-if 指令来实现。

<div v-for="(tab, index) in tabList" :key="index" v-if="currentIndex === index">{{ tab.content }}</div>

通过上述步骤，我们利用Vue的响应式原理、指令和方法，成功实现了tab选中效果。不仅代码结构清晰，而且具有良好的扩展性和维护性，能满足各种项目中tab切换交互的需求。