当前位置：首页 > VUE

vue 实现点击切换tab

2026-02-21 08:19:55VUE

vue 实现点击切换tab

在 Vue 中实现点击切换 Tab 功能可以通过多种方式完成，以下是几种常见的方法：

使用 v-if 或 v-show 控制显示

通过绑定一个变量来切换不同 Tab 内容的显示状态。

<template>
  <div>
    <div class="tabs">
      <button @click="activeTab = 'tab1'">Tab 1</button>
      <button @click="activeTab = 'tab2'">Tab 2</button>
      <button @click="activeTab = 'tab3'">Tab 3</button>
    </div>
    <div class="content">
      <div v-if="activeTab === 'tab1'">Content for Tab 1</div>
      <div v-if="activeTab === 'tab2'">Content for Tab 2</div>
      <div v-if="activeTab === 'tab3'">Content for Tab 3</div>
    </div>
  </div>
</template>

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

使用动态组件

通过动态组件 <component :is="..."> 来切换不同的组件。

<template>
  <div>
    <div class="tabs">
      <button @click="activeTab = 'Tab1'">Tab 1</button>
      <button @click="activeTab = 'Tab2'">Tab 2</button>
      <button @click="activeTab = 'Tab3'">Tab 3</button>
    </div>
    <div class="content">
      <component :is="activeTab" />
    </div>
  </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 {
      activeTab: 'Tab1'
    };
  }
};
</script>

使用 Vue Router 实现

如果 Tab 切换涉及路由跳转，可以使用 Vue Router 实现。

<template>
  <div>
    <router-link to="/tab1">Tab 1</router-link>
    <router-link to="/tab2">Tab 2</router-link>
    <router-link to="/tab3">Tab 3</router-link>
    <router-view></router-view>
  </div>
</template>

使用 CSS 类切换样式

通过动态绑定 CSS 类来实现 Tab 的高亮效果。

vue 实现点击切换tab

<template>
  <div>
    <div class="tabs">
      <button 
        @click="activeTab = 'tab1'" 
        :class="{ 'active': activeTab === 'tab1' }"
      >Tab 1</button>
      <button 
        @click="activeTab = 'tab2'" 
        :class="{ 'active': activeTab === 'tab2' }"
      >Tab 2</button>
      <button 
        @click="activeTab = 'tab3'" 
        :class="{ 'active': activeTab === 'tab3' }"
      >Tab 3</button>
    </div>
    <div class="content">
      <div v-show="activeTab === 'tab1'">Content for Tab 1</div>
      <div v-show="activeTab === 'tab2'">Content for Tab 2</div>
      <div v-show="activeTab === 'tab3'">Content for Tab 3</div>
    </div>
  </div>
</template>

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

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

以上方法可以根据具体需求选择使用，每种方式都能实现 Tab 切换功能。