Vue2.0选项卡

方法1：v-show（适用于简易选项卡）

利用v-show原理控制元素标签显示隐藏

data(){

        return{

                show:1,

        }

}

// Element：

<ul>

        <li @click="show=1">首页</li>

        <li @click="show=2">发现</li>

</ul>

<div v-show="show===1">111</div>

<div v-show="show===2">222</div>

v-if同上理一样

方法2:switch(适用于封装选项卡)

data(){

        return{

                list:[

                        {

                                id:1,

                                title:'首页',

                        },

                        {

                                id:2,

                                title:'发现',

                        },

                ],

                show:1

        }

}

Element：

<ul>

        <li v-for="item in list" :key="item.id" @click="myFn(item.title)">{{item.title}}</li>

</ul>

<div v-show="show===1">111</div>

<div v-show="show===2">222</div>

methods:{

        myFn(item){

                switch (item) {
                case '推荐':
                    this.show = 1
                    break;
                case '居家':
                    this.show = 2
                    break;
                default:
                    break;
            }
        }

    }

}