当前位置：首页 > VUE

vue 实现点击tab切换

2026-01-23 01:31:45VUE

Vue 实现 Tab 切换的方法

使用 `v-show` 或 `v-if` 控制内容显示

通过绑定 v-show 或 v-if 到当前激活的 Tab 索引，动态切换内容显示。v-show 通过 CSS 控制显示/隐藏，适合频繁切换的场景；v-if 会销毁和重建 DOM，适合内容较重的 Tab。

vue 实现点击tab切换

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="activeTab = index"
        :class="{ active: activeTab === index }"
      >
        {{ tab.title }}
      </button>
    </div>
    <div class="content">
      <div v-show="activeTab === 0">{{ tabs[0].content }}</div>
      <div v-show="activeTab === 1">{{ tabs[1].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' }
      ]
    };
  }
};
</script>

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

使用动态组件 `<component :is>`

通过动态组件可以更灵活地切换不同组件作为 Tab 内容，适合每个 Tab 内容结构差异较大的场景。

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

<script>
import Tab1Content from './Tab1Content.vue';
import Tab2Content from './Tab2Content.vue';

export default {
  components: { Tab1Content, Tab2Content },
  data() {
    return {
      currentComponent: 'Tab1Content',
      tabs: [
        { title: 'Tab 1', component: 'Tab1Content' },
        { title: 'Tab 2', component: 'Tab2Content' }
      ]
    };
  }
};
</script>

使用 Vue Router 实现路由级 Tab

通过路由参数或路径匹配实现 Tab 切换，适合需要保持浏览器历史记录或分享链接的场景。

<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: 'Tab 1', path: '/tab1' },
        { title: 'Tab 2', path: '/tab2' }
      ]
    };
  }
};
</script>