vue实现标签切换

2026-03-10 11:29:54VUE

使用动态组件实现标签切换

在Vue中可以通过<component :is="currentComponent">动态切换组件。定义多个子组件，通过v-for渲染标签栏，点击时切换当前组件。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.name"
        @click="currentTab = tab"
        :class="{ active: currentTab === tab }"
      >
        {{ tab.name }}
      </button>
    </div>
    <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: null,
      tabs: [
        { name: '标签1', component: 'Tab1' },
        { name: '标签2', component: 'Tab2' }
      ]
    }
  },
  created() {
    this.currentTab = this.tabs[0]
  }
}
</script>

<style>
.active {
  background-color: #ddd;
}
</style>

使用v-show控制显示隐藏

通过v-show指令控制不同标签内容的显示隐藏，适合简单的内容切换。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab"
        @click="activeTab = tab"
        :class="{ active: activeTab === tab }"
      >
        {{ tab }}
      </button>
    </div>

    <div v-show="activeTab === '标签1'">
      标签1内容
    </div>

    <div v-show="activeTab === '标签2'">
      标签2内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '标签1',
      tabs: ['标签1', '标签2']
    }
  }
}
</script>

使用路由实现标签页

对于复杂应用，可以使用Vue Router实现标签页导航，每个标签对应一个路由。

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

// App.vue
<template>
  <div>
    <router-link to="/tab1">标签1</router-link>
    <router-link to="/tab2">标签2</router-link>
    <router-view></router-view>
  </div>
</template>

使用第三方UI库

Element UI、Ant Design Vue等库提供了现成的Tabs组件：

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="标签1" name="tab1">
      内容1
    </el-tab-pane>
    <el-tab-pane label="标签2" name="tab2">
      内容2
    </el-tab-pane>
  </el-tabs>
</template>

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

实现动画过渡效果

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

vue实现标签切换

<transition name="fade" mode="out-in">
  <component :is="currentTab.component" />
</transition>

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