当前位置：首页 > VUE

vue组件实现tab切换

2026-01-21 02:43:33VUE

实现 Tab 切换的 Vue 组件

在 Vue 中实现 Tab 切换功能可以通过动态组件或条件渲染完成。以下是两种常见的实现方式：

动态绑定组件方式

通过 v-for 循环渲染 Tab 标题，利用 v-bind:class 动态切换激活状态，并通过 v-show 或 v-if 控制内容显示：

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

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

<style>
.tab-header div {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
}
.active {
  border-bottom: 2px solid #42b983;
}
.tab-content {
  padding: 20px;
}
</style>

使用动态组件方式

若每个 Tab 对应独立组件，可使用 <component :is> 动态加载：

<template>
  <div class="tabs">
    <div class="tab-header">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="currentTab = tab.component"
        :class="{ 'active': currentTab === tab.component }"
      >
        {{ tab.title }}
      </div>
    </div>
    <div class="tab-content">
      <component :is="currentTab" />
    </div>
  </div>
</template>

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

export default {
  components: { Tab1, Tab2 },
  data() {
    return {
      currentTab: 'Tab1',
      tabs: [
        { title: 'Tab 1', component: 'Tab1' },
        { title: 'Tab 2', component: 'Tab2' }
      ]
    }
  }
}
</script>

使用 Vue Router 实现

对于复杂应用，可将 Tab 切换与路由结合：

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

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