当前位置：首页 > VUE

vue实现tab栏

2026-01-18 22:02:53VUE

Vue实现Tab栏的方法

使用动态组件和v-for指令

通过v-for渲染多个tab标题，结合v-bind:class动态切换选中状态，利用v-show或v-if控制内容显示。

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

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

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

使用Vue Router实现路由级Tab

结合router-link和嵌套路由实现更复杂的tab切换场景，适合SPA应用。

<template>
  <div>
    <nav>
      <router-link 
        v-for="(tab, index) in tabs" 
        :key="index" 
        :to="tab.path"
        active-class="active-tab"
      >
        {{ tab.title }}
      </router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: 'Home', path: '/home' },
        { title: 'About', path: '/about' },
        { title: 'Contact', path: '/contact' }
      ]
    }
  }
}
</script>

<style>
.active-tab {
  font-weight: bold;
  color: #42b983;
}
</style>

使用第三方组件库

Element UI、Ant Design Vue等流行库提供现成的Tab组件，可直接使用。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="用户管理" name="user">用户管理内容</el-tab-pane>
    <el-tab-pane label="配置管理" name="config">配置管理内容</el-tab-pane>
    <el-tab-pane label="角色管理" name="role">角色管理内容</el-tab-pane>
  </el-tabs>
</template>

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

实现动画过渡效果

为tab切换添加Vue的过渡动画，提升用户体验。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="currentTab = tab"
        :class="{ active: currentTab === tab }"
      >
        {{ tab }}
      </button>
    </div>
    <transition name="fade" mode="out-in">
      <div :key="currentTab" class="tab-content">
        {{ contents[currentTab] }}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'Home',
      tabs: ['Home', 'Posts', 'Archive'],
      contents: {
        Home: 'Home content',
        Posts: 'Posts content',
        Archive: 'Archive content'
      }
    }
  }
}
</script>

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

以上方法可根据项目需求选择，从简单实现到复杂场景均有覆盖，注意样式和交互细节的优化。

vue实现tab栏