最先打仗vue,近来工作需要完成一个tab选项卡结果。在网上看到的要领都是把tab的每一个卡做成一个组件,然则觉得如许的话组件分的很细。厥后经由过程下面的要领完成了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabs</title>
<style>
.active{
background: #eee;
}
.tabs{
width: 200px;
height: 20px;
font:0;
padding:0;
}
.li-tab{
width: 50%;
height: 100%;
display:inline-block;
text-align: center;
}
.divTab{
width: 200px;height: 300px;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul class="tabs">
<li class="li-tab" v-for="(item,index) in tabsParam"
@click="toggleTabs(index)"
:class="{active:index!=nowIndex}">{{item}}</li>
</ul>
<div class="divTab" v-show="nowIndex===0">我是tab1</div>
<div class="divTab" v-show="nowIndex===1">我是tab2</div>
</div>
</body>
</html>
<script>
var app=new Vue({
el:'#app',
data:{
tabsParam:['tab1','tab2'],//(这个也可以用对象key,value来完成)
nowIndex:0,//默许第一个tab为激活状态
},
methods:{
toggleTabs:function(index){
this.nowIndex=index;
},
}
})
</script>
完成结果以下: