当前位置：首页 > VUE

vue实现tab栏切换

2026-02-20 22:36:02VUE

Vue实现Tab栏切换的方法

使用v-if和v-show指令

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

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

    <div class="content">
      <div v-if="activeTab === 0">
        内容1
      </div>
      <div v-show="activeTab === 1">
        内容2
      </div>
    </div>
  </div>
</template>

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

<style>
.active {
  color: red;
  font-weight: bold;
}
</style>

使用动态组件

通过Vue的动态组件<component :is="currentComponent">实现更灵活的tab切换。

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

    <component :is="currentComponent"></component>
  </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切换，每个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>

使用第三方库

可以使用专门的UI库如Element UI、Ant Design Vue等提供的Tab组件。

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="标签1" name="first">内容1</el-tab-pane>
    <el-tab-pane label="标签2" name="second">内容2</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first'
    }
  }
}
</script>