三种方法实现tab栏切换（CSS方法、JS方法、Vue方法）

以下是实现tab栏切换的三种方法的示例代码：

CSS方法：

/* 隐藏所有标签内容 */
.tab-content {
  display: none;
}
 
/* 显示当前标签的内容 */
.active-tab + .tab-content {
  display: block;
}

<!-- 标签导航 -->
<div class="tabs">
  <button class="tab" onclick="openTab(event, 'tab1')">Tab 1</button>
  <button class="tab" onclick="openTab(event, 'tab2')">Tab 2</button>
  <button class="tab" onclick="openTab(event, 'tab3')">Tab 3</button>
</div>
 
<!-- 标签内容 -->
<div id="tab1" class="tab-content active-tab">
  Content for tab 1
</div>
<div id="tab2" class="tab-content">
  Content for tab 2
</div>
<div id="tab3" class="tab-content">
  Content for tab 3
</div>

JS方法：

function openTab(evt, tabName) {
  // 移除所有标签的active类
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tab-content");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
 
  // 添加当前标签的active类
  tablinks = document.getElementsByClassName("tab");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
 
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

Vue方法：

<template>
  <div>
    <button v-for="tab in tabs" :key="tab.name" @click="activeTab = tab.name">
      {{ tab.name }}
    </button>
 
    <div v-for="tab in tabs" :key="tab.name">
      <div v-show="activeTab === tab.name">
        {{ tab.content }}
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      activeTab: 'tab1',
      tabs: [
        { name: 'Tab 1', content: 'Content for tab 1' },
        { name: 'Tab 2', content: 'Content for tab 2' },
        { name: 'Tab 3', content: 'Content for tab 3' }
      ]
    }
  }
}
</script>

这些示例展示了如何使用不同的方法来实现标签栏的切换。CSS方法主要依靠类的切换来控制显示和隐藏，JS方法通过直接操作DOM来改变标签内容的显示，而Vue方法则是使用Vue.js框架的响应式特性来控制视图的更新。