vue的tab切换

<template>
    <div id="app">
        <ul>
            <li :class="{active:active == index}" v-for="(item,index) in tabs" @click="tabBtnClick(index)">
                {{item}}
            </li>
        </ul>
        <div class="tabCon">
            <!-- <div class="conItem" v-for="(item,index) in tabCon" v-show="active==index">{{item}}</div>-->
            <div class="conItem" v-show="active == 0"></div>
            <div class="conItem" v-show="active == 1"></div>
            <div class="conItem" v-show="active == 2"></div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'home',
    data(){
        return {
            tabBtn:["成交公告","新闻资讯","政策法规"],
            //tabCon:["1","2","3"],
            active:0
        }
    },
    methods:{
        tabBtnClick(index){
            this.active = index;
        }
    }
}
</script>

<template>
    <div id="app">
        <ul>
            <li :class="{active:active == index}" v-for="(item,index) in tabs" @click="toggle(index)">
                {{item}}
            </li>
        </ul>
        <!--:is实现多个组件实现同一个挂载点-->
        <component :is="currentView"></component>
    </div>
</template>
<script>
import tab1 from './components/tabs/tab1.vue'
import tab2 from './components/tabs/tab2.vue'
export default {
    name: 'home',
    data(){
        return {
            tabBtn:["成交公告","新闻资讯","政策法规"],
            active:0,
            tabConIsShow:0,
            currentView:
        }
    },
    methods:{
        tabBtnClick(index){
            this.active = index;
            this.tabConIsShow = index;
        }
    },
    components:{
        tab1,
        tab2
    }
}
</script>