当前位置：首页 > VUE

vue实现多个tab

2026-01-11 23:29:44VUE

Vue 实现多个 Tab 的方法

在 Vue 中实现多个 Tab 功能可以通过动态组件、条件渲染或第三方库来完成。以下是几种常见的方法：

使用动态组件和 v-for 循环

通过动态组件和 v-for 循环可以动态生成多个 Tab，并实现切换功能。

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

<script>
export default {
  data() {
    return {
      tabs: ['Tab1', 'Tab2', 'Tab3'],
      currentTab: 'Tab1'
    };
  },
  components: {
    Tab1: { template: '<div>Content for Tab 1</div>' },
    Tab2: { template: '<div>Content for Tab 2</div>' },
    Tab3: { template: '<div>Content for Tab 3</div>' }
  }
};
</script>

<style>
.tabs button {
  padding: 10px 20px;
  margin-right: 5px;
  cursor: pointer;
}
.tabs button.active {
  background-color: #42b983;
  color: white;
}
</style>

使用条件渲染（v-if）

通过 v-if 或 v-show 可以控制 Tab 内容的显示与隐藏。

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

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'Tab1' },
        { name: 'Tab2' },
        { name: 'Tab3' }
      ],
      currentTab: 0
    };
  }
};
</script>

使用第三方库（如 Element UI）

Element UI 提供了现成的 Tab 组件，可以快速实现 Tab 功能。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab1" name="tab1">Content for Tab 1</el-tab-pane>
    <el-tab-pane label="Tab2" name="tab2">Content for Tab 2</el-tab-pane>
    <el-tab-pane label="Tab3" name="tab3">Content for Tab 3</el-tab-pane>
  </el-tabs>
</template>

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

使用 Vue Router 实现 Tab 导航

通过 Vue Router 可以实现类似 Tab 的页面导航功能。

<template>
  <div>
    <router-link
      v-for="(tab, index) in tabs"
      :key="index"
      :to="tab.path"
      active-class="active"
    >
      {{ tab.name }}
    </router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'Tab1', path: '/tab1' },
        { name: 'Tab2', path: '/tab2' },
        { name: 'Tab3', path: '/tab3' }
      ]
    };
  }
};
</script>