vue实现tab标签
Vue 实现 Tab 标签的方法
使用动态组件和 v-for 渲染标签
通过 v-for 循环生成标签页标题，结合 v-bind:class 动态切换激活状态。使用 v-show 或动态组件 <component :is="currentTab"> 控制内容显示。
<template>
<div>
<div class="tabs">
<button
v-for="tab in tabs"
:key="tab.name"
@click="currentTab = tab.name"
:class="{ active: currentTab === tab.name }"
>
{{ tab.title }}
</button>
</div>
<div class="content">
<component :is="currentTab" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentTab: 'Home',
tabs: [
{ title: '首页', name: 'Home' },
{ title: '关于', name: 'About' }
]
}
},
components: { Home, About }
}
</script>
<style>
.active {
background-color: #42b983;
color: white;
}
</style>使用 Vue Router 实现路由标签
结合 Vue Router 的嵌套路由或命名视图，通过 <router-link> 实现标签切换，适合需要 URL 同步的场景。
<template>
<div>
<router-link
v-for="tab in tabs"
:key="tab.path"
:to="tab.path"
active-class="active"
>
{{ tab.title }}
</router-link>
<router-view></router-view>
</div>
</template>使用第三方库
如 vue-tabs-component 或 element-ui 的 el-tabs，可快速实现复杂功能（如动画、懒加载）。
<template>
<el-tabs v-model="activeTab">
<el-tab-pane label="首页" name="home">内容1</el-tab-pane>
<el-tab-pane label="关于" name="about">内容2</el-tab-pane>
</el-tabs>
</template>注意事项
- 动态组件需提前注册子组件。
- 路由方式需配置对应路由规则。
- 样式需自定义或配合 UI 框架的类名。
