当前位置：首页 > VUE

vue tab实现

2026-01-12 21:41:17VUE

Vue 实现 Tab 切换的几种方法

使用 v-if/v-show 动态切换内容

通过 v-if 或 v-show 控制不同 Tab 内容的显示隐藏，配合点击事件切换当前激活的 Tab。

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

    <div class="content">
      <div v-if="activeTab === 0">
        Content for Tab 1
      </div>
      <div v-else-if="activeTab === 1">
        Content for Tab 2
      </div>
      <div v-else>
        Content for Tab 3
      </div>
    </div>
  </div>
</template>

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

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

使用动态组件

通过 Vue 的 <component> 动态组件结合 is 属性实现更灵活的 Tab 切换。

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

    <component :is="activeTab" />
  </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 {
      activeTab: 'Tab1',
      tabs: [
        { title: 'Tab 1', component: 'Tab1' },
        { title: 'Tab 2', component: 'Tab2' },
        { title: 'Tab 3', component: 'Tab3' }
      ]
    }
  }
}
</script>

使用路由实现 Tab 切换

对于更复杂的应用，可以使用 Vue Router 实现基于路由的 Tab 切换。

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

<template>
  <div>
    <router-link to="/tab1" active-class="active">Tab 1</router-link>
    <router-link to="/tab2" active-class="active">Tab 2</router-link>
    <router-link to="/tab3" active-class="active">Tab 3</router-link>

    <router-view></router-view>
  </div>
</template>

使用第三方 UI 库

许多流行的 Vue UI 库如 Element UI、Ant Design Vue、Vuetify 等都提供了现成的 Tab 组件。

以 Element UI 为例：

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

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

动画效果增强

为 Tab 切换添加过渡动画可以提升用户体验。

<template>
  <div>
    <!-- Tab 按钮 -->
    <transition name="fade" mode="out-in">
      <div :key="activeTab">
        <!-- 当前 Tab 内容 -->
      </div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

每种实现方式各有优缺点，根据项目需求选择最适合的方案。简单项目可以使用原生实现，复杂项目建议考虑路由或 UI 库方案。

vue tab实现