当前位置：首页 > VUE

vue实现tab表切换

2026-01-23 08:50:57VUE

Vue实现Tab切换的方法

使用v-if和v-show指令

通过v-if或v-show控制不同tab内容的显示与隐藏。v-if会销毁和重建DOM，适合内容较重的tab；v-show仅切换display属性，适合频繁切换的轻量内容。

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

    <div class="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 {
      currentTab: 0,
      tabs: [
        { title: 'Tab 1' },
        { title: 'Tab 2' },
        { title: 'Tab 3' }
      ]
    }
  }
}
</script>

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

使用动态组件

通过Vue的<component>配合is特性实现组件级tab切换，适合每个tab都是独立组件的情况。

<template>
  <div>
    <button @click="currentTab = 'CompA'">组件A</button>
    <button @click="currentTab = 'CompB'">组件B</button>

    <component :is="currentTab"></component>
  </div>
</template>

<script>
import CompA from './CompA.vue'
import CompB from './CompB.vue'

export default {
  components: { CompA, CompB },
  data() {
    return {
      currentTab: 'CompA'
    }
  }
}
</script>

使用路由切换

对于SPA应用，可以通过vue-router实现基于路由的tab切换，适合需要保持浏览器历史记录的场景。

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

<template>
  <div>
    <router-link to="/tab1">Tab1</router-link>
    <router-link to="/tab2">Tab2</router-link>

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

使用第三方库

对于复杂需求，可以考虑使用专门针对Vue的tab组件库，如vue-tabs-component：

npm install vue-tabs-component

<template>
  <tabs>
    <tab name="First tab">
      第一个tab内容
    </tab>
    <tab name="Second tab">
      第二个tab内容
    </tab>
  </tabs>
</template>

<script>
import { Tabs, Tab } from 'vue-tabs-component'

export default {
  components: { Tabs, Tab }
}
</script>

动画过渡效果

为tab切换添加过渡动画，提升用户体验：

<template>
  <transition name="fade" mode="out-in">
    <div :key="currentTab">
      {{ tabs[currentTab].content }}
    </div>
  </transition>
</template>

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

以上方法可根据实际需求选择或组合使用，简单的UI切换推荐使用v-show方案，组件化程度高的项目适合动态组件方案，需要URL共享的场景则推荐路由方案。

vue实现tab表切换