vue 实现选项卡功能

实现选项卡功能可以使用 Vue.js 的 v-bind 和 v-show 指令。具体步骤如下：

1. 在 data 中定义一个变量来控制选项卡的显示状态，例如 currentTab，默认为第一个选项卡。

data() {
  return {
    currentTab: 'tab1'
  };
}

2. 在模板中使用 v-bind 绑定选项卡的状态，并在选项卡标题上使用 v-on:click 监听点击事件，切换选项卡的显示状态。

<ul>
  <li v-bind:class="{ active: currentTab === 'tab1' }" v-on:click="currentTab = 'tab1'">Tab 1</li>
  <li v-bind:class="{ active: currentTab === 'tab2' }" v-on:click="currentTab = 'tab2'">Tab 2</li>
  <li v-bind:class="{ active: currentTab === 'tab3' }" v-on:click="currentTab = 'tab3'">Tab 3</li>
</ul>
<div v-show="currentTab === 'tab1'">Tab 1 content</div>
<div v-show="currentTab === 'tab2'">Tab 2 content</div>
<div v-show="currentTab === 'tab3'">Tab 3 content</div>

3. 根据需要，可以使用 CSS 样式来美化选项卡的外观和切换效果。

以上就是使用 Vue.js 实现选项卡功能的基本步骤。