vue 实现tab页
Vue 实现 Tab 页的方法
在 Vue 中实现 Tab 页可以通过动态组件、条件渲染或第三方库完成。以下是几种常见实现方式：
使用 v-if 或 v-show 条件渲染
通过绑定 v-if 或 v-show 控制不同 Tab 内容的显示与隐藏：
<template>
<div>
<div class="tab-buttons">
<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">内容 1</div>
<div v-if="currentTab === 1">内容 2</div>
<div v-if="currentTab === 2">内容 3</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [
{ name: 'Tab 1' },
{ name: 'Tab 2' },
{ name: 'Tab 3' }
],
currentTab: 0
};
}
};
</script>
<style>
.active {
background-color: #42b983;
color: white;
}
</style>使用动态组件 <component :is>
结合动态组件实现更灵活的 Tab 切换：
<template>
<div>
<button
v-for="(tab, index) in tabs"
:key="index"
@click="currentTab = tab.component"
>
{{ tab.name }}
</button>
<component :is="currentTab" />
</div>
</template>
<script>
import Tab1 from './Tab1.vue';
import Tab2 from './Tab2.vue';
export default {
components: { Tab1, Tab2 },
data() {
return {
tabs: [
{ name: 'Tab 1', component: 'Tab1' },
{ name: 'Tab 2', component: 'Tab2' }
],
currentTab: 'Tab1'
};
}
};
</script>使用第三方库（如 Element UI）
若项目使用 UI 框架，可直接调用封装好的 Tab 组件：
<template>
<el-tabs v-model="activeTab">
<el-tab-pane label="Tab 1" name="tab1">内容 1</el-tab-pane>
<el-tab-pane label="Tab 2" name="tab2">内容 2</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeTab: 'tab1'
};
}
};
</script>关键注意事项
- 性能优化：频繁切换时，
v-show通过 CSS 控制显示隐藏，比v-if的销毁/重建更高效。 - 组件复用：动态组件适合需要保留组件状态的场景（如表单输入）。
- 路由集成：如需 URL 同步 Tab 状态，可结合 Vue Router 的哈希或查询参数。
以上方法可根据项目需求选择，轻量级场景推荐条件渲染，复杂场景建议使用动态组件或 UI 库。
