vue实现tab栏切换案例代码要详细

好的，以下是一个简单的 Vue 实现 tab 栏切换的代码示例。

首先，需要在 Vue 实例中定义一个 data，用来存储当前选中的 tab：

new Vue({
  el: '#app',
  data: {
    currentTab: 'tab1'
  },
  methods: {
    selectTab(tab) {
      this.currentTab = tab
    }
  }
})

然后，在 HTML 中使用 v-bind 和 v-on 指令来绑定数据和事件：

<div id="app">
  <div class="tabs">
    <div class="tab" :class="{ 'active': currentTab === 'tab1' }" @click="selectTab('tab1')">Tab 1</div>
    <div class="tab" :class="{ 'active': currentTab === 'tab2' }" @click="selectTab('tab2')">Tab 2</div>
    <div class="tab" :class="{ 'active': currentTab === 'tab3' }" @click="selectTab('tab3')">Tab 3</div>
  </div>

  <div class="tab-content">
    <div class="tab-pane" v-show="currentTab === 'tab1'">
      Content for tab 1
    </div>
    <div class="tab-pane" v-show="currentTab === 'tab2'">
      Content for tab 2
    </div>
    <div class="tab-pane" v-show="currentTab === 'tab3'">
      Content for tab 3
    </div>
  </div>
</div>

在这个示例中，使用了 v-bind:class 指令来动态绑定 class，根据当前选中的 tab 判断是否添加 active 类名。同时使用了 v-on:click 指令来监听点击事件，并调用 selectTab 方法切换 tab。

最后，在 CSS 中定义样式：

.tabs {
  display: flex;
}

.tab {
  padding: 10px;
  cursor: pointer;
}

.tab.active {
  background-color: #ccc;
}

.tab-content {
  border: 1px solid #ccc;
  padding: 10px;
}

.tab-pane {
  display: none;
}

.tab-pane.show {
  display: block;
}

在这个示例中，使用了 display 属性来控制 tab 内容的显示，根据当前选中的 tab 判断是否显示。同时为 active 类名和 show 类名分别定义了样式，使得选中的 tab 和对应的内容高亮显示。

以上就是一个简单的 Vue 实现 tab 栏切换的代码示例，希望对你有所帮助。