vue tab切换

Vue中实现Tab切换可以使用v-if或v-show指令来控制不同的内容在不同的Tab之间切换。

首先，你需要定义一个数据属性来控制当前选中的Tab：

data() {
  return {
    activeTab: 'tab1'
  }
}

然后，在HTML中设置Tab切换的按钮和内容：

<div>
  <ul>
    <li @click="activeTab = 'tab1'">Tab 1</li>
    <li @click="activeTab = 'tab2'">Tab 2</li>
    <li @click="activeTab = 'tab3'">Tab 3</li>
  </ul>
  <div v-show="activeTab === 'tab1'">Tab 1 Content</div>
  <div v-show="activeTab === 'tab2'">Tab 2 Content</div>
  <div v-show="activeTab === 'tab3'">Tab 3 Content</div>
</div>

当用户点击不同的Tab按钮时，activeTab的值会发生变化，从而控制显示不同的内容。

注意，v-show指令会在DOM中保留被隐藏的元素，而v-if指令会完全移除没有选中的内容，所以在性能方面，v-show指令更适合用于Tab切换。