当前位置：首页 > VUE

vue实现tab标签

2026-01-07 00:12:46VUE

Vue 实现 Tab 标签的方法

使用动态组件和 `v-for` 渲染标签

通过 v-for 循环生成标签页标题，结合 v-bind:class 动态切换激活状态。使用 v-show 或动态组件 <component :is="currentTab"> 控制内容显示。

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

<script>
export default {
  data() {
    return {
      currentTab: 'Home',
      tabs: [
        { title: '首页', name: 'Home' },
        { title: '关于', name: 'About' }
      ]
    }
  },
  components: { Home, About }
}
</script>

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

使用 Vue Router 实现路由标签

结合 Vue Router 的嵌套路由或命名视图，通过 <router-link> 实现标签切换，适合需要 URL 同步的场景。

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

使用第三方库

如 vue-tabs-component 或 element-ui 的 el-tabs，可快速实现复杂功能（如动画、懒加载）。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="首页" name="home">内容1</el-tab-pane>
    <el-tab-pane label="关于" name="about">内容2</el-tab-pane>
  </el-tabs>
</template>