本文介绍在 Vue.js 中实现 Tab 选项卡的两种主流方式。首先探讨如何利用 vue-router 的 router-link-active 类名特性直接复用路由功能；其次详解不使用路由时，通过绑定 toggle 方法动态切换 active 索引及当前视图组件（currentView）的数据驱动实现方案，避免直接操作 DOM，保持代码简洁。
Vue.js Tab 选项卡实现概述
在开发 Tab 选项卡时，传统做法通常依赖 jQuery 等库直接操作 DOM，通过移除同级元素的 active 类并给被点击元素添加该类来切换状态。然而，在 Vue.js 框架中，我们应尽量避免直接操作 DOM，那么如何实现这一功能呢？
基于 Vue Router 的 Tab 方案
如果你使用过 vue-router，会发现其机制类似于 Tab 选项卡：点击后，对应的 router-link 元素会自动添加 router-link-active 类，只需定义该类的样式即可（默认类名可配置修改）。因此，我们可以直接利用 Vue 的路由功能来构建 Tab 选项卡。但如果不想使用路由功能，该如何处理？
请参考以下实现方法：
html部分
无路由方案的组件化实现
<div id="app">
<ul>
<li @click="toggle($index ,tab.view)" v-for="tab in tabs" :class="{active:active==$index}">
{{tab.type}}
</li>
</ul>
<component :is="currentView"></component>
</div>js部分
Vue.component('child1', {
template: "<p>this is child1</p>"
})
Vue.component('child2', {
template: "<p>this is child2</p>"
})
new Vue({
el: "#app",
data: {
active: 0,
currentView: 'child1',
tabs: [
{
type: 'tab1',
view: 'child1'
},
{
type: 'tab2',
view: 'child2'
}
]
},
methods: {
toggle(i, v){
this.active = i
this.currentView = v
}
}
})
接下来，只需定义一个 .active 样式即可，例如设置最基础的样式规则。
css
.active{
color:red
}简易的 Vue.js Tab 选项卡实现
其原理十分简单：为 Tab 选项绑定 toggle 方法，点击时将 active 值设为对应索引，从而添加 active 类；显示内容也遵循相同原理。相比传统 DOM 操作，这种方法整体更为简洁，但缺点是每个 Tab 选项都需要作为一个独立组件处理。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。