当前位置：首页 > VUE

vue实现切换tab

2026-02-17 17:41:18VUE

Vue 实现 Tab 切换的方法

使用 v-if 和 v-show 动态切换内容

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

vue实现切换tab

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

    <div class="content">
      <div v-if="activeTab === 0">
        Content for Tab 1
      </div>
      <div v-if="activeTab === 1">
        Content for Tab 2
      </div>
    </div>
  </div>
</template>

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

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

使用动态组件 `<component>`

通过动态组件可以更灵活地切换不同的组件作为 Tab 内容。

vue实现切换tab

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

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

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

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

使用 Vue Router 实现路由级 Tab

如果 Tab 切换需要改变 URL 或保持状态，可以使用 Vue Router 的嵌套路由。

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

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

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

使用第三方库

对于更复杂的 Tab 需求，可以使用现成的 UI 库如 Element UI、Vuetify 等。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab1">
      Content for Tab 1
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">
      Content for Tab 2
    </el-tab-pane>
  </el-tabs>
</template>

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