html：
<div class="content">
<div class='box'>
<ul class="list">
<li v-for="(value,index) in arr" @click="chg(index)">{{value.title}}</li>
</ul>
<ul class="main">
<li v-for="(value,index) in arr" v-show="value.flag">{{value.contan}}</li>
</ul>
</div>
</div>
css：
*{
margin: 0;
padding: 0;
list-style: none;
}
.content{
width: 500px;
margin: 0 auto;
}
.box{
width: 450px;
}
.box ul{
overflow: hidden;
}
.box .list li{
float: left;
font-size: 18px;
width: 145px;
text-align: center;
height: 35px;
line-height: 35px;
border: 1px solid #000;
}
.main{
width: 500px;
}
.main li{
height: 150px;
width: 450px;
border: 1px solid #000;
}
js：
<script src="vue.js"></script>
<script>
new Vue({
el:".content",
data:{
arr:[
{title:'这是选项卡1',contan:"111111111111",flag:true},
{title:'这是选项卡2',contan:"22222",flag:false},
{title:'这是选项卡3',contan:"333333",flag:false}
]
},
methods:{
chg:function(ind){
for(var i=0;i<this.arr.length;i++){
this.arr[i].flag=false;
}
this.arr[ind].flag=true;
}
}
})
</script>
效果图：
QQ图片20180917164011.png
