vue一对多选项卡代码

下面是一个简单的Vue多选项卡代码示例：

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

<script>
export default {
  data() {
    return {
      activeTab: 0, // 默认选中的选项卡
      tabs: [
        {
          name: '选项卡1',
          content: '这是选项卡1的内容',
        },
        {
          name: '选项卡2',
          content: '这是选项卡2的内容',
        },
        {
          name: '选项卡3',
          content: '这是选项卡3的内容',
        },
      ],
    };
  },
};
</script>

在上面的示例中，我们使用了一个 `activeTab` 变量来跟踪当前选中的选项卡。我们使用 `v-for` 指令迭代 `tabs` 数组，为每个选项卡渲染一个列表项，并使用 `@click` 事件监听器来更新 `activeTab` 变量。我们使用 `v-show` 指令来控制选项卡内容的显示。

你可以根据自己的需求修改这个示例，并添加更多的选项卡。