Vue实现选项卡效果

body部分：

<div class="app">
<ul>
<li v-for="(item,index) in list" @click="tab(index)">
{{item.tab}}
</li>
</ul>
<div v-show="item.show" v-for="(item,index) in list">
{{item.title}}
</div>
</div>
js部分：

new Vue({
el:".app",
data:{
list:[
{tab:"选项一",show:true,title:"111111111111"},
{tab:"选项二",show:false,title:"222222222222"},
{tab:"选项三",show:false,title:"333333333333"}
]
},
methods:{
tab:function(index){
for(var i=0;i<this.list.length;i++){
this.list[i].show=false;
}
this.list[index].show=true;
}
}
})
style部分：

*{
padding:0;
margin:0;
box-sizing: border-box;
}
.app{
width:500px;
margin:100px auto;
}
ul{
overflow: hidden;
width:450px;
}
li{
list-style: none;
float: left;
width:150px;
border:1px solid #000;
text-align: center;
}
.app div{
width:450px;
border:1px solid #000;
text-align: center;
line-height: 100px;
height:100px;
}