当前位置：首页 > VUE

vue 实现tab

2026-01-07 20:33:46VUE

实现 Tab 切换功能

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

使用 `v-if` 或 `v-show` 实现条件渲染

通过绑定 currentTab 变量控制显示哪个 Tab 内容：

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

    <div class="tab-content">
      <div v-if="currentTab === 0">
        Content for Tab 1
      </div>
      <div v-else-if="currentTab === 1">
        Content for Tab 2
      </div>
      <div v-else>
        Content for Tab 3
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tabs: [
        { title: 'Tab 1' },
        { title: 'Tab 2' },
        { title: 'Tab 3' }
      ]
    }
  }
}
</script>

<style>
.tab-buttons button.active {
  background-color: #4CAF50;
  color: white;
}
</style>

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

更灵活的方案是结合动态组件，适合复杂 Tab 内容：

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

    <component :is="currentTab" class="tab-content" />
  </div>
</template>

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

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

使用第三方库

对于更高级的 Tab 功能（如动画、URL 同步等），可以考虑以下库：

vue-tabs-component：提供路由集成
bootstrap-vue 的 b-tabs 组件
element-ui 的 el-tabs 组件

响应式设计建议

添加以下 CSS 增强用户体验：

.tab-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.tab-buttons button {
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #f5f5f5;
  border-radius: 4px 4px 0 0;
}

.tab-content {
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 0 4px 4px 4px;
}

以上方案可根据项目需求选择，简单场景用条件渲染，复杂场景推荐动态组件或第三方库。

vue 实现tab