Vue.js实现tab切换效果

<!--这里是html结构--><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: ["内容一", "内容二","内容三"], num: 1},methods: { tab(index) { this.num = index; }}});</script>