vue写一个tab切换

好的，以下是一个简单的 Vue tab 切换代码示例：

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

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

<style>
.tabs {
  display: flex;
}

.tab {
  padding: 8px;
  margin-right: 8px;
  cursor: pointer;
}

.tab.active {
  border-bottom: 2px solid blue;
}

.tab-content {
  padding: 16px;
}
</style>

这个示例包含了一个 `tabs` 数据数组来存储选项卡的标签，以及一个 `activeTab` 数据来存储当前选中的标签的索引。使用 `v-for` 指令来循环渲染出每个标签，并绑定 `@click` 事件来设置当前选中的标签索引。

在模板中，使用 `v-bind:class` 来动态绑定 `active` 样式类，以便突出显示当前选中的标签。最后，使用 `tabs[activeTab]` 来动态渲染选中标签的内容。

你可以根据需要调整代码样式和内容。