当前位置：首页 > VUE

vue 实现tab

2026-03-07 05:34:04VUE

Vue 实现 Tab 切换的几种方法

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

通过 v-if 或 v-show 控制不同 Tab 内容的显示与隐藏。v-if 会销毁和重建 DOM，适合内容较多或需要频繁切换的场景；v-show 通过 CSS 的 display 属性控制，适合简单切换。

<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 {
      tabs: [
        { title: 'Tab 1' },
        { title: 'Tab 2' },
        { title: 'Tab 3' }
      ],
      currentTab: 0
    }
  }
}
</script>

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

使用动态组件 `<component :is>`

通过动态组件可以更灵活地切换不同的子组件，适合每个 Tab 内容较复杂且需要独立封装的场景。

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

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

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

使用 Vue Router 实现路由级 Tab

如果 Tab 切换需要同步 URL 变化（如浏览器前进/后退可切换 Tab），可以结合 Vue Router 实现。

<template>
  <div>
    <router-link 
      v-for="(tab, index) in tabs" 
      :key="index"
      :to="tab.path"
      active-class="active"
    >
      {{ tab.title }}
    </router-link>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: 'Tab 1', path: '/tab1' },
        { title: 'Tab 2', path: '/tab2' },
        { title: 'Tab 3', path: '/tab3' }
      ]
    }
  }
}
</script>

使用第三方库（如 Element UI）

UI 库（如 Element UI、Ant Design Vue）通常提供封装好的 Tab 组件，适合快速开发。

vue 实现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-tab-pane label="Tab 3" name="tab3">内容 3</el-tab-pane>
  </el-tabs>
</template>

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