纯Vue实现tab标签

2026-02-21 17:21:46VUE

Vue 实现 Tab 标签的方法

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

通过 v-for 渲染标签页标题，结合动态组件 <component :is="currentTab"> 切换内容。
定义 tabs 数组和 currentTab 状态，点击标签时更新 currentTab。

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

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

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

<style>
.tab-buttons button {
  padding: 8px 16px;
  margin-right: 4px;
  background: #eee;
  border: none;
}
.tab-buttons button.active {
  background: #ddd;
  font-weight: bold;
}
.tab-content {
  padding: 16px;
  border: 1px solid #ddd;
}
</style>

使用 `v-show` 控制显示

通过 v-show 切换标签内容，适合简单场景。
定义 activeTab 状态，点击标签时切换对应的 v-show 条件。

<template>
  <div>
    <div class="tab-buttons">
      <button 
        v-for="tab in tabs" 
        :key="tab"
        @click="activeTab = tab"
        :class="{ active: activeTab === tab }"
      >
        {{ tab }}
      </button>
    </div>
    <div v-show="activeTab === 'Tab1'">内容1</div>
    <div v-show="activeTab === 'Tab2'">内容2</div>
  </div>
</template>

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

使用路由切换

结合 Vue Router 实现标签页，适合多页面应用。
通过 <router-link> 导航，<router-view> 显示内容。

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

<script>
export default {
  data() {
    return {
      tabs: [
        { name: '标签1', path: '/tab1' },
        { name: '标签2', path: '/tab2' }
      ]
    };
  }
};
</script>