问vue如何实现tab切换 ？

<div id="app">

        <ul>

            <li 

            v-for="(item,index) in tabs" 

            :class="{active:index == num}"

             @click="tab(index)">{{item}}</li>

        </ul>

        <div class="tabCon">

            <div 

            v-for='(itemCon,index) in tabContents' 

            v-show=" index == num">{{itemCon}}</div>

        </div>

    </div>

<!--这里是js代码-->

<script type="text/javascript">

var vm = new Vue({

    el: '#app',

    data: {

        tabs: ["冰箱", "酒柜","菜多多"],

        tabContents: ["馨厨S系列","内容二","内容三"],

        num: 1

    },

    methods: {

        tab(index) {

            this.num = index;

        }

    }

});

</script>