vue.js 做的选项卡效果

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