vue选项卡效果

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>