当前位置：首页 > VUE

vue tab实现

2026-02-10 04:57:38VUE

Vue 实现 Tab 切换的几种方法

使用 v-if/v-show 结合事件控制

通过 v-if 或 v-show 控制不同 tab 内容的显示隐藏，配合点击事件切换当前激活的 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 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="currentComponent"> 动态切换组件，适合不同 tab 对应不同组件的情况。

vue tab实现

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

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

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

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

使用第三方库

可以使用专门针对 Vue 的 tab 组件库，如 vue-tabs-component：

安装：

vue tab实现

npm install vue-tabs-component

使用示例：

<template>
  <tabs>
    <tab name="First tab">
      First tab content
    </tab>
    <tab name="Second tab">
      Second tab content
    </tab>
  </tabs>
</template>

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

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

使用路由实现 Tab

通过 Vue Router 实现基于路由的 tab 切换，适合需要 URL 反映当前 tab 状态的场景。

// router.js
const routes = [
  { path: '/', component: Home },
  { 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>