vue 实现tab页

Vue 实现 Tab 页的方法

在 Vue 中实现 Tab 页可以通过动态组件、条件渲染或第三方库完成。以下是几种常见实现方式：

使用 v-if 或 v-show 条件渲染

通过绑定 v-if 或 v-show 控制不同 Tab 内容的显示与隐藏：

<template>
  <div>
    <div class="tab-buttons">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="currentTab = index"
        :class="{ active: currentTab === index }"
      >
        {{ tab.name }}
      </button>
    </div>
    <div class="tab-content">
      <div v-if="currentTab === 0">内容 1</div>
      <div v-if="currentTab === 1">内容 2</div>
      <div v-if="currentTab === 2">内容 3</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'Tab 1' },
        { name: 'Tab 2' },
        { name: 'Tab 3' }
      ],
      currentTab: 0
    };
  }
};
</script>

<style>
.active {
  background-color: #42b983;
  color: white;
}
</style>

使用动态组件 <component :is>

结合动态组件实现更灵活的 Tab 切换：

<template>
  <div>
    <button 
      v-for="(tab, index) in tabs" 
      :key="index"
      @click="currentTab = tab.component"
    >
      {{ tab.name }}
    </button>
    <component :is="currentTab" />
  </div>
</template>

<script>
import Tab1 from './Tab1.vue';
import Tab2 from './Tab2.vue';

export default {
  components: { Tab1, Tab2 },
  data() {
    return {
      tabs: [
        { name: 'Tab 1', component: 'Tab1' },
        { name: 'Tab 2', component: 'Tab2' }
      ],
      currentTab: 'Tab1'
    };
  }
};
</script>

使用第三方库（如 Element UI）

若项目使用 UI 框架，可直接调用封装好的 Tab 组件：

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab1">内容 1</el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">内容 2</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1'
    };
  }
};
</script>

关键注意事项

• 性能优化：频繁切换时，v-show 通过 CSS 控制显示隐藏，比 v-if 的销毁/重建更高效。
• 组件复用：动态组件适合需要保留组件状态的场景（如表单输入）。
• 路由集成：如需 URL 同步 Tab 状态，可结合 Vue Router 的哈希或查询参数。

以上方法可根据项目需求选择，轻量级场景推荐条件渲染，复杂场景建议使用动态组件或 UI 库。