vue實現tab切換

1.先上效果圖

2.完整代碼

<ul class="tabs">
      <li class="li-tab" v-for="(item,index) in tabsParam"
            @click="toggleTabs(index)"
            :class="{active:index===nowIndex}">{{item}}
      </li>
 </ul>
  <!--切換項組件-->  
  <tableChart v-show="nowIndex===0"></tableChart>
  <barChart v-show="nowIndex===1"></barChart>
  <lineChart v-show="nowIndex===2"></lineChart>
  <pieChart v-show="nowIndex===3"></pieChart>    
<script>
    import tableChart from './tableChart.vue';
    import barChart from './barChart.vue';
    import lineChart from './lineChart.vue';
    import pieChart from './pieChart.vue';
     export default {
        name: 'newCreate',
        components:{
            tableChart,barChart,lineChart,pieChart
        },
        data() {
            return{
                tabsParam:['表格','柱狀圖','折線圖','餅圖'],
                nowIndex:0,
                isShow:false,
                }
        },
        methods:{
            //切換tab項
             toggleTabs(index){
                 this.nowIndex = index;
                 $(window).resize();
            },
            }
}
</script>