vue 实现tab

Vue 实现 Tab 的几种方法

使用动态组件

通过 Vue 的 <component :is="currentTab"> 动态切换组件，结合 v-for 渲染标签栏。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab" 
        @click="currentTab = tab"
        :class="{ active: currentTab === tab }"
      >
        {{ tab }}
      </button>
    </div>
    <component :is="currentTab" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['Home', 'About', 'Contact'],
      currentTab: 'Home'
    }
  },
  components: {
    Home,
    About,
    Contact
  }
}
</script>

使用 CSS 控制显示隐藏

通过 v-show 或 v-if 控制内容区域的显示，适合简单场景。

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

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: 'Tab 1', content: 'Content 1' },
        { title: 'Tab 2', content: 'Content 2' }
      ]
    }
  }
}
</script>

使用第三方库

例如 vue-tabs-component 或 element-ui 的 el-tabs，快速实现复杂功能。

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="Home" name="home">Home Content</el-tab-pane>
    <el-tab-pane label="About" name="about">About Content</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'home'
    }
  }
}
</script>

注意事项

• 动态组件需提前注册子组件
• v-if 会触发组件销毁/重建，v-show 仅切换 CSS 显示
• 复杂交互建议使用状态管理（如 Vuex）维护 Tab 状态
• 移动端可结合手势库实现滑动切换