参考地址：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>效果截图：
