当前位置：首页 > VUE

vue实现tab互斥

2026-02-18 21:33:51VUE

Vue 实现 Tab 互斥的方法

在 Vue 中实现 Tab 互斥（即同一时间只能有一个 Tab 处于激活状态）可以通过多种方式实现。以下是几种常见的方法：

使用 v-model 和 v-if

通过绑定一个 activeTab 变量，结合 v-if 或 v-show 控制 Tab 内容的显示与隐藏。

<template>
  <div>
    <button 
      v-for="tab in tabs" 
      :key="tab.id" 
      @click="activeTab = tab.id"
      :class="{ active: activeTab === tab.id }"
    >
      {{ tab.name }}
    </button>
    <div v-for="tab in tabs" :key="tab.id">
      <div v-if="activeTab === tab.id">
        {{ tab.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1',
      tabs: [
        { id: 'tab1', name: 'Tab 1', content: 'Content for Tab 1' },
        { id: 'tab2', name: 'Tab 2', content: 'Content for Tab 2' },
        { id: 'tab3', name: 'Tab 3', content: 'Content for Tab 3' }
      ]
    }
  }
}
</script>

使用动态组件

通过动态组件 <component :is="currentComponent"> 实现 Tab 内容的切换。

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

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

export default {
  data() {
    return {
      activeTab: 'tab1',
      tabs: [
        { id: 'tab1', name: 'Tab 1', component: 'Tab1' },
        { id: 'tab2', name: 'Tab 2', component: 'Tab2' },
        { id: 'tab3', name: 'Tab 3', component: 'Tab3' }
      ]
    }
  },
  computed: {
    currentComponent() {
      const tab = this.tabs.find(tab => tab.id === this.activeTab)
      return tab ? tab.component : null
    }
  },
  components: { Tab1, Tab2, Tab3 }
}
</script>

使用 Vue Router

如果 Tab 切换涉及路由，可以通过 Vue Router 实现。

<template>
  <div>
    <router-link 
      v-for="tab in tabs" 
      :key="tab.path" 
      :to="tab.path"
      active-class="active"
    >
      {{ tab.name }}
    </router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { path: '/tab1', name: 'Tab 1' },
        { path: '/tab2', name: 'Tab 2' },
        { path: '/tab3', name: 'Tab 3' }
      ]
    }
  }
}
</script>

使用第三方库

可以使用第三方库如 vue-tabs 或 element-ui 的 Tab 组件快速实现互斥 Tab。

vue实现tab互斥

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab1">Content for Tab 1</el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">Content for Tab 2</el-tab-pane>
    <el-tab-pane label="Tab 3" name="tab3">Content for Tab 3</el-tab-pane>
  </el-tabs>
</template>

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