Vue实现tab选项卡
程序员文章站
2022-07-23 21:43:49
Tabs {{tab.type}} ......
<!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>
上一篇： jdbc链接数据库
下一篇： 酷派大神F1 搭载真八核处理器