tab切换（vue）

tab切换

<template>
    <div class="all">
        <ul class="title">
            <li :class="{active:index===nowIndex}" v-for="(item,index) in tabList" :key="index" @click="toggleTab(index)">{{item}}</li>   
        </ul>
        <div class="content">
            <tab1 class="con" v-show="nowIndex===0"></tab1>
            <tab2 class="con" v-show="nowIndex===1"></tab2>
            <tab3 class="con" v-show="nowIndex===2"></tab3>
        </div>
    </div>
</template>

<script>
import tab1 from '@/components/common/tab1.vue'
import tab2 from '@/components/common/tab2.vue'
import tab3 from '@/components/common/tab3.vue'
export default {
    components: {
        tab1,tab2,tab3
    },
    data(){
        return{
            tabList:['tab1','tab2','tab3'],
            nowIndex:0,
            isShow:false
        }
    },
    methods:{
        toggleTab(index){
            this.nowIndex = index        
        }
    }
}
</script>

<style>
    .all{
         600px;
        margin: auto;
    }
    ul{
        height: 60px;
         100%;
        padding: 0;
        margin: 0;
        list-style: none;
        border:1px solid #ccc;
        border-bottom:none;
    }
    li{
         33.1%;
        height: 60px;
        float: left;
        border-right: 1px solid #ccc; 
    }
    .content{
         600px;
        height:300px;
    }
    .con{
         600px;
        height:300px;
        border: 1px solid #ccc;
    }

</style>