vue实现标签

2026-03-27 12:52:10VUE

Vue 实现标签功能

使用动态组件实现标签

在 Vue 中可以通过动态组件 <component :is="currentTab"> 实现标签切换功能。定义一个数组存储标签数据，使用 v-for 渲染标签导航，通过点击事件切换当前显示的标签内容。

<template>
  <div>
    <div class="tabs">
      <div 
        v-for="tab in tabs" 
        :key="tab.name"
        @click="currentTab = tab.component"
        :class="{ active: currentTab === tab.component }"
      >
        {{ tab.name }}
      </div>
    </div>
    <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: '标签1', component: 'Tab1' },
        { name: '标签2', component: 'Tab2' }
      ]
    }
  }
}
</script>

<style>
.tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.tabs div {
  padding: 10px 20px;
  cursor: pointer;
}
.tabs div.active {
  border-bottom: 2px solid #42b983;
}
</style>

使用路由实现标签

对于更复杂的应用，可以使用 Vue Router 实现标签功能。配置路由后，通过 <router-link> 导航，<router-view> 显示内容。

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Tab1 from './views/Tab1.vue'
import Tab2 from './views/Tab2.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

<!-- App.vue -->
<template>
  <div>
    <router-link to="/tab1">标签1</router-link>
    <router-link to="/tab2">标签2</router-link>
    <router-view></router-view>
  </div>
</template>

使用第三方库实现高级标签

对于需要更复杂功能的标签页，可以使用第三方库如 vue-tabs-component。安装后直接使用提供的组件即可快速实现标签功能。

vue实现标签

npm install vue-tabs-component

<template>
  <tabs>
    <tab name="标签1" :selected="true">
      标签1内容
    </tab>
    <tab name="标签2">
      标签2内容
    </tab>
  </tabs>
</template>

<script>
import { Tabs, Tab } from 'vue-tabs-component'

export default {
  components: { Tabs, Tab }
}
</script>