当前位置：首页 > VUE

vue怎么实现 tab

2026-01-08 04:33:05VUE

Vue 实现 Tab 的方法

使用动态组件和 `v-if`

通过动态组件或 v-if 指令切换不同 Tab 内容，结合点击事件改变当前激活的 Tab。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index" 
        @click="currentTab = tab"
        :class="{ active: currentTab === tab }"
      >
        {{ tab }}
      </button>
    </div>
    <div class="tab-content">
      <div v-if="currentTab === 'Tab1'">Content for Tab 1</div>
      <div v-if="currentTab === 'Tab2'">Content for Tab 2</div>
      <div v-if="currentTab === 'Tab3'">Content for Tab 3</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['Tab1', 'Tab2', 'Tab3'],
      currentTab: 'Tab1'
    };
  }
};
</script>

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

使用 Vue Router 实现 Tab

通过 Vue Router 的路由切换实现 Tab 功能，适合需要 URL 记录的场景。

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

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'Tab1', path: '/tab1' },
        { name: 'Tab2', path: '/tab2' },
        { name: 'Tab3', path: '/tab3' }
      ]
    };
  }
};
</script>

使用第三方库（如 Element UI）

利用现成的 UI 库快速实现 Tab 功能，例如 Element UI 的 el-tabs 组件。

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

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

使用动态组件 `<component>`

通过 :is 动态绑定组件名，实现更灵活的 Tab 切换。

<template>
  <div>
    <button 
      v-for="(tab, index) in tabs" 
      :key="index" 
      @click="currentTab = tab.component"
    >
      {{ tab.name }}
    </button>
    <component :is="currentTab"></component>
  </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: [
        { name: 'Tab1', component: 'Tab1' },
        { name: 'Tab2', component: 'Tab2' },
        { name: 'Tab3', component: 'Tab3' }
      ],
      currentTab: 'Tab1'
    };
  }
};
</script>