tab栏切换Vue2代码

下面是一个简单的 Vue2 代码示例，实现了一个 tab 栏切换的功能：

<template>
  <div>
    <ul class="tab">
      <li v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="activeTab = index">{{ tab }}</li>
    </ul>
    <div class="tab-content">
      <div v-for="(content, index) in contents" :key="index" v-show="activeTab === index">{{ content }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['Tab 1', 'Tab 2', 'Tab 3'],
      contents: ['Content 1', 'Content 2', 'Content 3'],
      activeTab: 0,
    };
  },
};
</script>

<style scoped>
.tab {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tab li {
  cursor: pointer;
  padding: 10px;
  margin-right: 10px;
  border-radius: 5px 5px 0 0;
}
.tab li.active {
  background-color: #ccc;
}
.tab-content div {
  padding: 10px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>

这段代码中，我们定义了一个 `tabs` 数组和一个 `contents` 数组，分别存储了 tab 栏的标签和内容。在模板中，我们使用 `v-for` 指令渲染出了 tab 栏和内容，并使用 `v-show` 指令控制了内容的显示与隐藏。在 `li` 标签上，我们使用了 `@click` 指令监听点击事件，通过改变 `activeTab` 的值来实现 tab 栏的切换。最后，我们使用了一些 CSS 样式来美化界面。