当前位置：首页 > VUE

vue实现tab切换

2026-01-11 20:18:44VUE

Vue实现Tab切换的方法

使用v-show指令

通过v-show控制不同tab内容的显示与隐藏，结合点击事件切换当前激活的tab。

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

    <div class="content">
      <div v-show="currentTab === 0">内容1</div>
      <div v-show="currentTab === 1">内容2</div>
      <div v-show="currentTab === 2">内容3</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tabs: [
        { title: 'Tab1' },
        { title: 'Tab2' },
        { title: 'Tab3' }
      ]
    }
  }
}
</script>

<style>
.active {
  background-color: #42b983;
  color: white;
}
</style>

使用动态组件

利用Vue的<component>动态组件和keep-alive实现带缓存的tab切换。

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

    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>

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

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

使用路由实现

通过Vue Router实现基于路由的tab切换，适合较复杂的应用场景。

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

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

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: 'Tab1', path: '/tab1' },
        { title: 'Tab2', path: '/tab2' },
        { title: 'Tab3', path: '/tab3' }
      ]
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以使用专门的UI库如Element UI的Tabs组件。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab1" name="tab1">内容1</el-tab-pane>
    <el-tab-pane label="Tab2" name="tab2">内容2</el-tab-pane>
    <el-tab-pane label="Tab3" name="tab3">内容3</el-tab-pane>
  </el-tabs>
</template>

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