当前位置：首页 > VUE

vue实现tabs

2026-01-13 05:19:01VUE

Vue 实现 Tabs 组件

使用 Vue 实现 Tabs 组件可以通过动态组件或条件渲染实现。以下是两种常见方法：

方法一：动态组件结合 v-for 渲染

通过动态组件和 v-for 循环渲染标签页，利用 v-model 控制当前激活的标签页。

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

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

<style>
.tabs-header {
  display: flex;
  gap: 10px;
}
.active {
  font-weight: bold;
  border-bottom: 2px solid blue;
}
</style>

方法二：条件渲染实现

使用 v-if 或 v-show 根据当前选中的标签页显示对应的内容。

<template>
  <div class="tabs">
    <div class="tabs-header">
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        @click="currentTab = index"
        :class="{ active: currentTab === index }"
      >
        {{ tab.title }}
      </button>
    </div>
    <div class="tabs-content">
      <div v-if="currentTab === 0">
        Content for Tab 1
      </div>
      <div v-if="currentTab === 1">
        Content for Tab 2
      </div>
    </div>
  </div>
</template>

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

方法三：使用第三方库

如果需要更复杂的功能（如动画、嵌套标签页等），可以使用现成的第三方库，如 vue-tabs-component 或 element-ui 的 Tabs 组件。

安装 element-ui 并引入 Tabs 组件：

npm install element-ui

使用示例：

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

<script>
import { Tabs, TabPane } from "element-ui";

export default {
  components: {
    "el-tabs": Tabs,
    "el-tab-pane": TabPane,
  },
  data() {
    return {
      activeTab: "tab1",
    };
  },
};
</script>

以上方法可以根据项目需求选择，动态组件适合内容较复杂的场景，条件渲染适合简单场景，第三方库则提供更多开箱即用的功能。

vue实现tabs