css部分
<style>
*{
padding:0;
margin: 0;
}
.list>li{
list-style: none;
width:100px;
height:70px;
float:left;
text-align: center;
line-height:70px;
color:aliceblue;
}
li:nth-child(1){
background:pink;
}
li:nth-child(2){
background:lightblue;
}
li:nth-child(3){
background:lightgreen;
}
ul{
width:300px;
height:70px;
margin: 0 auto;
}
.cont>li{
list-style: none;
text-align: center;
color:#fff;
height:50px;
line-height: 50px;
}
</style>
html效果
<div id='itany'>
<ul class="list">
<li v-for='(value,index) in arr' @click='tab(index)'>{{value.tab}}
</li>
</ul>
<ul class="cont">
<li v-for='(value,index) in arr' v-show='value.flag'>{{value.title}}</li>
</ul>
</div>
js效果
<script>
new Vue({
el:'#itany',
data:{
arr:[
{title:'111',flag:true,tab:'粉色'},
{title:'222',flag:false,tab:'蓝色'},
{title:'333',flag:false,tab:'绿色'}
]
},
methods:{
tab:function(index){
for(var i=0;i<this.arr.length;i++){
this.arr[i].flag=false;
}
this.arr[index].flag=true;
}
}
})
</script>