当前位置：首页 > VUE

vue 怎么实现tab

2026-01-15 02:06:21VUE

Vue 实现 Tab 切换

在 Vue 中实现 Tab 切换功能可以通过动态组件或条件渲染（v-if/v-show）完成。以下是两种常见方法：

动态绑定 `:is` 实现 Tab

通过 :is 动态绑定组件名或组件对象，结合点击事件切换内容：

<template>
  <div>
    <div class="tab-buttons">
      <button 
        v-for="tab in tabs" 
        :key="tab.name"
        @click="currentTab = tab.name"
        :class="{ active: currentTab === tab.name }"
      >
        {{ tab.label }}
      </button>
    </div>
    <component :is="currentTabComponent" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'HomeTab', label: 'Home' },
        { name: 'ProfileTab', label: 'Profile' }
      ],
      currentTab: 'HomeTab'
    };
  },
  computed: {
    currentTabComponent() {
      return this.currentTab;
    }
  },
  components: {
    HomeTab: { template: '<div>Home Content</div>' },
    ProfileTab: { template: '<div>Profile Content</div>' }
  }
};
</script>

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

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

通过条件渲染控制 Tab 内容的显示与隐藏：

<template>
  <div>
    <div class="tab-buttons">
      <button 
        v-for="tab in tabs" 
        :key="tab.id"
        @click="activeTab = tab.id"
        :class="{ active: activeTab === tab.id }"
      >
        {{ tab.label }}
      </button>
    </div>
    <div class="tab-content">
      <div v-if="activeTab === 'home'">Home Content</div>
      <div v-if="activeTab === 'profile'">Profile Content</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { id: 'home', label: 'Home' },
        { id: 'profile', label: 'Profile' }
      ],
      activeTab: 'home'
    };
  }
};
</script>