vue怎么写一个可以变的tab栏

要实现一个可以变的tab栏，可以使用Vue中的动态绑定和条件渲染。

首先，需要定义一个数组来存储tab栏的选项卡，例如：

data() {
  return {
    tabs: [
      { label: '选项卡1', content: '选项卡1的内容' },
      { label: '选项卡2', content: '选项卡2的内容' },
      { label: '选项卡3', content: '选项卡3的内容' }
    ],
    activeTab: 0
  }
}

其中，`tabs`数组存储了每个选项卡的标签和内容，`activeTab`表示当前选中的选项卡的索引。

然后，可以使用`v-for`指令在模板中渲染出每个选项卡的标签，同时使用`v-if`或`v-show`指令根据`activeTab`来判断当前选项卡是否应该显示。例如：

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

在上面的代码中，`tab-bar`是选项卡的容器，`tab`是每个选项卡的标签，`tab-content`是选项卡内容的容器，`tab-pane`是每个选项卡的内容。

其中，`v-for`指令用来渲染每个选项卡的标签和内容，`:key`用来指定每个选项卡的唯一标识符，`:class`用来动态绑定选项卡的样式，`@click`用来监听选项卡的点击事件，`v-show`用来根据`activeTab`来判断当前选项卡是否应该显示。

最后，可以根据需要自定义CSS样式来美化选项卡的外观。