vue实现tab标签
Vue 实现 Tab 标签的方法
动态组件结合 v-for
通过 v-for 渲染标签页标题，动态切换组件内容。
代码示例：
<template>
<div>
<div class="tabs">
<button
v-for="(tab, index) in tabs"
:key="index"
@click="currentTab = tab.component"
:class="{ active: currentTab === tab.component }"
>
{{ tab.name }}
</button>
</div>
<component :is="currentTab" />
</div>
</template>
<script>
export default {
data() {
return {
currentTab: 'Tab1Content',
tabs: [
{ name: 'Tab 1', component: 'Tab1Content' },
{ name: 'Tab 2', component: 'Tab2Content' }
]
};
},
components: {
Tab1Content: { template: '<div>Content 1</div>' },
Tab2Content: { template: '<div>Content 2</div>' }
}
};
</script>
<style>
.active {
background-color: #ddd;
}
</style>使用 v-show 控制显示
通过 v-show 切换不同标签页内容的显隐。
代码示例：
<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 v-show="currentTab === 0">Content 1</div>
<div v-show="currentTab === 1">Content 2</div>
</div>
</template>
<script>
export default {
data() {
return {
currentTab: 0,
tabs: [
{ name: 'Tab 1' },
{ name: 'Tab 2' }
]
};
}
};
</script>使用第三方库（如 vue-router）
通过路由实现多页签导航，适合复杂场景。
代码示例：
<template>
<div>
<router-link
v-for="(tab, index) in tabs"
:key="index"
:to="tab.path"
active-class="active"
>
{{ tab.name }}
</router-link>
<router-view />
</div>
</template>
<script>
export default {
data() {
return {
tabs: [
{ name: 'Tab 1', path: '/tab1' },
{ name: 'Tab 2', path: '/tab2' }
]
};
}
};
</script>样式优化建议
- 为标签页按钮添加悬停效果和过渡动画。
- 使用 CSS Flexbox 或 Grid 布局对齐标签页标题。
- 通过
:class绑定高亮当前选中标签页。
注意事项
- 动态组件方式适合内容差异大的场景，但需提前注册组件。
v-show适合简单内容切换，初始会渲染所有内容。- 路由方式需搭配
vue-router，适合多视图应用。
