VUE.js 实现tab切换功能

H5部分

<div id="app">
    <ul>
        <li v-for="(item,index) in tabs" :class="{active:index == num}" @click="title(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: {
        title: ["标题一", "标题二","标题三"],
        tabContents: ["内容一", "内容二","内容三"],
        num: 1
    },
    methods: {
        title(index) {
            this.num = index;
        }
    }
});
</script>