Vue实现选项卡效果

效果图：点击上方选项卡实现下方数字切换效果

a.png

body部分：

• 
  {{item.tab}}
  

{{item.title}}

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[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;
}