vue 实现点击tab切换
Vue 实现 Tab 切换的方法
使用 v-show 或 v-if 控制内容显示
通过绑定 v-show 或 v-if 到当前激活的 Tab 索引，动态切换内容显示。v-show 通过 CSS 控制显示/隐藏，适合频繁切换的场景；v-if 会销毁和重建 DOM，适合内容较重的 Tab。
<template>
<div>
<div class="tabs">
<button
v-for="(tab, index) in tabs"
:key="index"
@click="activeTab = index"
:class="{ active: activeTab === index }"
>
{{ tab.title }}
</button>
</div>
<div class="content">
<div v-show="activeTab === 0">{{ tabs[0].content }}</div>
<div v-show="activeTab === 1">{{ tabs[1].content }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 0,
tabs: [
{ title: 'Tab 1', content: 'Content for Tab 1' },
{ title: 'Tab 2', content: 'Content for Tab 2' }
]
};
}
};
</script>
<style>
.active {
background-color: #42b983;
color: white;
}
</style>使用动态组件 <component :is>
通过动态组件可以更灵活地切换不同组件作为 Tab 内容，适合每个 Tab 内容结构差异较大的场景。
<template>
<div>
<div class="tabs">
<button
v-for="(tab, index) in tabs"
:key="index"
@click="activeTab = tab.component"
:class="{ active: currentComponent === tab.component }"
>
{{ tab.title }}
</button>
</div>
<component :is="currentComponent" />
</div>
</template>
<script>
import Tab1Content from './Tab1Content.vue';
import Tab2Content from './Tab2Content.vue';
export default {
components: { Tab1Content, Tab2Content },
data() {
return {
currentComponent: 'Tab1Content',
tabs: [
{ title: 'Tab 1', component: 'Tab1Content' },
{ title: 'Tab 2', component: 'Tab2Content' }
]
};
}
};
</script>使用 Vue Router 实现路由级 Tab
通过路由参数或路径匹配实现 Tab 切换，适合需要保持浏览器历史记录或分享链接的场景。
<template>
<div>
<router-link
v-for="(tab, index) in tabs"
:key="index"
:to="tab.path"
active-class="active"
>
{{ tab.title }}
</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [
{ title: 'Tab 1', path: '/tab1' },
{ title: 'Tab 2', path: '/tab2' }
]
};
}
};
</script>注意事项
- 如果 Tab 内容需要保持状态（如表单输入），使用
<keep-alive>包裹动态组件或路由视图。 - 对于复杂动画效果，可以结合 Vue 的过渡系统（
<transition>）实现平滑切换。 - 移动端场景可考虑集成第三方库（如
vant的 Tab 组件）实现手势滑动切换。
