您的位置：首页 > Web前端 > Vue.js

Vue实现tab选项卡

2018-04-27 11:15 295 查看

Vue实现tab选项卡

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabs</title>
<style>
.active{
background: #f00;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li @click="toggle(index ,tab.view)" v-for="(tab,index) in tabs" :class="{active:active===index}">
{{tab.type}}
</li>
</ul>
<component :is="currentView"></component>
</div>

</body>
</html>
<script>
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
}
}
})
</script>

演示地址: https://xibushijie.github.io/static/vuetab.html

posted @ 2018-04-27 4000 11:15 <_/> 阅读(...) 评论(...) 编辑收藏

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

标签：

相关文章推荐

新的分享

章节导航