当前位置：首页 > VUE

用vue实现tab切换

2026-01-20 05:47:50VUE

使用 Vue 实现 Tab 切换

Vue 提供了多种方式实现 Tab 切换功能，以下是两种常见的方法：基于 v-if/v-show 的动态渲染和基于动态组件的实现。

基于 `v-if`/`v-show` 的动态渲染

通过切换 v-if 或 v-show 控制 Tab 内容的显示与隐藏，适合简单的 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>
.tab-buttons button {
  padding: 8px 16px;
  margin-right: 4px;
  cursor: pointer;
}
.tab-buttons button.active {
  background-color: #42b983;
  color: white;
}
</style>

基于动态组件

使用 Vue 的 <component :is="..."> 动态加载组件，适合每个 Tab 内容较复杂的场景。

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

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

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

使用 Vue Router 实现 Tab 切换

如果 Tab 切换需要与 URL 同步（如浏览器前进/后退导航），可以结合 Vue Router 实现。

// router.js
const routes = [
  { path: '/tab1', component: Tab1 },
  { path: '/tab2', component: Tab2 },
  { path: '/tab3', component: Tab3 }
];

// Tab 组件中
<router-link to="/tab1">Tab 1</router-link>
<router-link to="/tab2">Tab 2</router-link>
<router-link to="/tab3">Tab 3</router-link>
<router-view></router-view>

使用第三方库

如需更丰富的功能（如动画、响应式设计），可以集成第三方库如：

用vue实现tab切换

vue-tabs：轻量级 Tab 组件
bootstrap-vue：提供现成的 Tab 组件
element-ui 或 ant-design-vue：企业级 UI 库中的 Tab 组件

// 例如使用 element-ui
<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>

以上方法均可实现 Tab 切换，选择时需根据项目复杂度、是否需要路由同步或动画效果等需求决定。