当前位置：首页 > VUE

vue 实现tab

2026-03-27 15:06:57VUE

Vue 实现 Tab 切换功能

在 Vue 中实现 Tab 切换功能可以通过动态组件或条件渲染实现，以下是几种常见方法：

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

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

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

    <div class="tab-content">
      <div v-show="currentTab === 'Tab1'">
        Tab1 内容
      </div>
      <div v-show="currentTab === 'Tab2'">
        Tab2 内容
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['Tab1', 'Tab2'],
      currentTab: 'Tab1'
    }
  }
}
</script>

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

使用动态组件

通过 <component :is="currentComponent"> 动态切换组件：

<template>
  <div>
    <button @click="currentComponent = 'Tab1'">Tab1</button>
    <button @click="currentComponent = 'Tab2'">Tab2</button>

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

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

export default {
  components: { Tab1, Tab2 },
  data() {
    return {
      currentComponent: 'Tab1'
    }
  }
}
</script>

使用 Vue Router 实现路由级 Tab

对于更复杂的应用，可以使用 Vue Router 实现路由级 Tab：

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

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

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

<router-view></router-view>

使用第三方 UI 库

许多 Vue UI 组件库提供了现成的 Tab 组件，如：

Element UI 的 <el-tabs>
Vuetify 的 <v-tabs>
Ant Design Vue 的 <a-tabs>

以 Element UI 为例：

vue 实现tab

<el-tabs v-model="activeTab">
  <el-tab-pane label="Tab1" name="tab1">Tab1 内容</el-tab-pane>
  <el-tab-pane label="Tab2" name="tab2">Tab2 内容</el-tab-pane>
</el-tabs>

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

每种方法适用于不同场景，简单交互可使用条件渲染，组件复用考虑动态组件，复杂应用推荐使用路由或 UI 库方案。