当前位置：首页 > VUE

vue 组件实现tab切换

2026-01-21 02:29:27VUE

Vue 组件实现 Tab 切换

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

通过 Vue 的 <component :is> 动态组件绑定当前激活的组件名，结合点击事件切换标签页：

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

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

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

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

使用 `v-if` 条件渲染

通过 v-if 控制不同标签内容的显示与隐藏：

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

    <div v-if="currentTab === 'Tab1'">
      <h3>内容1</h3>
    </div>
    <div v-else-if="currentTab === 'Tab2'">
      <h3>内容2</h3>
    </div>
  </div>
</template>

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

使用 CSS 和状态管理

结合 CSS 隐藏非活动标签内容，通过索引或唯一标识管理状态：

<template>
  <div>
    <div class="tab-headers">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="activeIndex = index"
        :class="{ 'active': activeIndex === index }"
      >
        {{ tab.title }}
      </div>
    </div>
    <div class="tab-contents">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="{ 'show': activeIndex === index }"
      >
        {{ tab.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      tabs: [
        { title: '标签1', content: '内容1' },
        { title: '标签2', content: '内容2' }
      ]
    };
  }
};
</script>

<style>
.tab-contents > div {
  display: none;
}
.tab-contents > div.show {
  display: block;
}
</style>

使用第三方库（如 Element UI）

若项目使用 UI 库（如 Element UI），可直接调用封装好的 Tab 组件：

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="标签1" name="tab1">
      内容1
    </el-tab-pane>
    <el-tab-pane label="标签2" name="tab2">
      内容2
    </el-tab-pane>
  </el-tabs>
</template>

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