当前位置：首页 > VUE

vue实现标签切换

2026-02-18 22:05:07VUE

Vue 实现标签切换的方法

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

通过动态组件可以轻松切换不同的子组件。结合 v-for 和 v-if 控制显示逻辑。

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

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

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

结合 `v-if` 或 `v-show`

直接通过条件渲染控制标签内容的显隐。

<template>
  <div>
    <button @click="activeTab = 'tab1'">标签1</button>
    <button @click="activeTab = 'tab2'">标签2</button>

    <div v-if="activeTab === 'tab1'">内容1</div>
    <div v-if="activeTab === 'tab2'">内容2</div>
  </div>
</template>

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

使用 Vue Router

适合需要 URL 同步的标签切换场景。

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

<template>
  <router-link to="/tab1">标签1</router-link>
  <router-link to="/tab2">标签2</router-link>
  <router-view></router-view>
</template>

第三方组件库

如 Element UI 的 el-tabs 或 Ant Design Vue 的 a-tabs。

vue实现标签切换

<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>