Vue实现选项卡效果

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

QQ截图20180917155951.png

body部分：

<div class="app">
    <ul>
        <li v-for="(item,index) in list" @click="tab(index)">
           {{item.tab}}
        </li>
    </ul>
    <div v-show="item.show" v-for="(item,index) in list">
            {{item.title}}
    </div>
</div>

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.length;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;
    }