vue实现tab效果

2026-03-30 06:59:17VUE

使用动态组件实现 Tab 效果

在 Vue 中可以通过动态组件 <component :is="currentTab"> 实现 Tab 切换效果。需要定义 tabs 数组和当前激活的 tab 名称。

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

<script>
export default {
  data() {
    return {
      currentTab: 'Home',
      tabs: [
        { name: 'Home', component: () => import('./Home.vue') },
        { name: 'About', component: () => import('./About.vue') }
      ]
    }
  }
}
</script>

使用 v-show 控制显示隐藏

通过 v-show 指令可以控制不同 Tab 内容的显示隐藏，适合内容较简单的场景。

<template>
  <div>
    <button 
      v-for="tab in tabs" 
      :key="tab"
      @click="activeTab = tab"
    >
      {{ tab }}
    </button>

    <div v-show="activeTab === 'Home'">
      Home 内容
    </div>

    <div v-show="activeTab === 'About'">
      About 内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'Home',
      tabs: ['Home', 'About']
    }
  }
}
</script>

使用路由实现 Tab 效果

对于更复杂的应用，可以使用 Vue Router 实现 Tab 导航效果。

// router.js
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

// App.vue
<template>
  <router-link to="/home">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</template>

添加 Tab 切换动画

为 Tab 切换添加过渡动画效果，提升用户体验。

<template>
  <div>
    <button @click="currentTab = 'Home'">Home</button>
    <button @click="currentTab = 'About'">About</button>

    <transition name="fade" mode="out-in">
      <component :is="currentTab"></component>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用第三方 UI 库

许多 Vue UI 组件库提供了现成的 Tab 组件，如 Element UI、Vuetify 等。

vue实现tab效果

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Home" name="home">Home 内容</el-tab-pane>
    <el-tab-pane label="About" name="about">About 内容</el-tab-pane>
  </el-tabs>
</template>

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