当前位置：首页 > VUE

vue实现tab效果

2026-01-17 13:45:06VUE

Vue 实现 Tab 效果的方法

使用动态组件和 v-if

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

<template>
  <div class="tab-container">
    <div class="tab-header">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="activeTab = index"
        :class="{ 'active': activeTab === index }"
      >
        {{ tab.title }}
      </button>
    </div>
    <div class="tab-content">
      <div v-if="activeTab === 0">
        {{ tabs[0].content }}
      </div>
      <div v-else-if="activeTab === 1">
        {{ tabs[1].content }}
      </div>
      <div v-else-if="activeTab === 2">
        {{ tabs[2].content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: 'Tab 1', content: 'Content for Tab 1' },
        { title: 'Tab 2', content: 'Content for Tab 2' },
        { title: 'Tab 3', content: 'Content for Tab 3' }
      ]
    };
  }
};
</script>

<style>
.tab-header button {
  padding: 10px 20px;
  margin-right: 5px;
  cursor: pointer;
}
.tab-header button.active {
  background-color: #42b983;
  color: white;
}
.tab-content {
  padding: 20px;
  border: 1px solid #ddd;
}
</style>

使用动态组件和 `<component>`

通过动态组件 <component :is="currentComponent"> 实现更灵活的标签切换，适合不同标签对应不同组件的情况。

<template>
  <div class="tab-container">
    <div class="tab-header">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="activeTab = tab.component"
        :class="{ 'active': activeTab === tab.component }"
      >
        {{ tab.title }}
      </button>
    </div>
    <div class="tab-content">
      <component :is="activeTab" />
    </div>
  </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 {
      activeTab: 'Tab1',
      tabs: [
        { title: 'Tab 1', component: 'Tab1' },
        { title: 'Tab 2', component: 'Tab2' },
        { title: 'Tab 3', component: 'Tab3' }
      ]
    };
  }
};
</script>

使用 Vue Router 实现路由标签页

通过 Vue Router 的嵌套路由或命名视图实现标签页效果，适合需要 URL 同步标签状态的场景。

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

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

使用第三方库（如 Element UI）

借助 UI 框架（如 Element UI、Ant Design Vue）快速实现标签页功能。

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

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