vue切换标签实现

2026-03-09 06:22:26VUE

Vue 切换标签的实现方法

在 Vue 中实现标签切换功能，可以通过多种方式完成。以下是几种常见的实现方案：

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

通过 Vue 的动态组件特性，可以轻松切换不同的组件作为标签内容：

<template>
  <div>
    <button @click="currentTab = 'Tab1'">Tab 1</button>
    <button @click="currentTab = 'Tab2'">Tab 2</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'
    }
  }
}
</script>

使用 v-if/v-show 条件渲染

通过条件指令控制不同标签内容的显示：

<template>
  <div>
    <button @click="activeTab = 1">Tab 1</button>
    <button @click="activeTab = 2">Tab 2</button>

    <div v-if="activeTab === 1">
      Tab 1 内容
    </div>

    <div v-show="activeTab === 2">
      Tab 2 内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 1
    }
  }
}
</script>

使用 Vue Router 实现

对于更复杂的标签系统，可以使用 Vue Router 的路由视图：

<template>
  <div>
    <router-link to="/tab1">Tab 1</router-link>
    <router-link to="/tab2">Tab 2</router-link>
    <router-view />
  </div>
</template>

使用第三方 UI 库

许多 Vue UI 组件库提供了现成的标签组件：

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

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

自定义标签组件

可以创建可复用的自定义标签组件：

vue切换标签实现

<template>
  <div class="tabs">
    <div class="tab-headers">
      <div 
        v-for="(tab, index) in tabs"
        :key="index"
        @click="selectTab(index)"
        :class="{ active: activeTab === index }"
      >
        {{ tab.title }}
      </div>
    </div>
    <div class="tab-content">
      <slot :name="tabs[activeTab].slot"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabs: Array,
    initialTab: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeTab: this.initialTab
    }
  },
  methods: {
    selectTab(index) {
      this.activeTab = index
    }
  }
}
</script>