您的位置：首页 > 产品设计 > UI/UE

Vue.js学习笔记——tabs标签页

2018-02-07 15:30 113 查看

参考地址：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>

效果截图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航