当前位置：首页 > VUE

vue实现切换tab

2026-01-17 01:11:23VUE

实现 Vue 中 Tab 切换功能

使用 v-if 和 v-show 控制显示

在 Vue 中可以通过 v-if 或 v-show 指令来控制不同 Tab 内容的显示和隐藏。v-if 会销毁和重建 DOM 元素，而 v-show 只是切换 CSS 的 display 属性。

vue实现切换tab

<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>
  </div>
</template>

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

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

使用动态组件

Vue 的 <component> 元素配合 is 属性可以实现动态组件切换，这种方式适合不同 Tab 对应不同组件的情况。

vue实现切换tab

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

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

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

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

使用 Vue Router 实现路由级 Tab

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

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Tab1 from './views/Tab1.vue'
import Tab2 from './views/Tab2.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/tab1', component: Tab1 },
    { path: '/tab2', component: Tab2 }
  ]
})

<!-- App.vue -->
<template>
  <div>
    <router-link to="/tab1">Tab 1</router-link>
    <router-link to="/tab2">Tab 2</router-link>

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

使用第三方库

如果需要更丰富的 Tab 功能，可以考虑使用第三方库如 vue-tabs 或 element-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-if/v-show，组件复用适合动态组件，大型应用推荐使用路由，快速开发可考虑第三方库。