本文主要是介绍Vue.js学习笔记——tabs标签页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
参考地址：https://jsfiddle.net/2kn4hqts/
demo.html
<!DOCTYPE html>
<html> <head> <meta charset="GBK"> <title></title> <script src="vue.js" type="text/javascript" charset="GBK"></script></head><style>.active {color: #409EFF;border-bottom: 1px solid #409EFF;border-bottom-color: #fff;
}
ul li {padding: 0 15px;float:left;list-style: none;border: 1px solid #e4e7ed;
line-height: 40px;
}</style><body><div id="root"><ul>
<li @click="toggle(index,tab.view)" v-for="(tab,index) in tabs" :class="{active: active == index}">{{ tab.type }}</li>
</ul><br><br>
<component :is="currentView" ></component>
</div><script>Vue.component("child1", {
template: '<p>用户管理</p>'
})
Vue.component("child2", {
template: '<p>配置管理</p>'
})
Vue.component("child3", {
template: '<p>角色管理</p>'
})
Vue.component("child4", {
template: '<p>定时任务补偿</p>'
})
new Vue({
el: '#root',
data: {
currentView: 'child1',
active: 0,
tabs: [{type: '用户管理',view: 'child1'},{type: '配置管理',view: 'child2'},{type: '角色管理',view: 'child3'},{type: '定时任务补偿',view: 'child4'}]
},methods: {toggle(i,v) {this.active = i
this.currentView = v
}}
})</script></body>
</html>效果截图：
这篇关于Vue.js学习笔记——tabs标签页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
