Vue-选项卡切换

 1 <div id="tab">
 2       <ul>
 3         <li 
 4         v-for="(tab, index) in tabs" 
 5         :class="{active:index == num}"
 6         @click="tabToggle(index)">
 7           {{ tab }}
 8         </li>
 9       </ul>
10       <div class="tabCon">
11       <div v-for="(itemCon, index) in tabContents"
12            v-show="index == num">
13          {{ itemCon}}
14       </div>
15     </div>
16     </div>
17     <script>
18      new Vue({
19        el:"#tab",
20        data:{
21          tabs:["新闻排行","图片排行","视频排行","游戏排行"],
22          tabContents:["内容一","内容二","内容三","内容四"],
23          num:0
24        },
25        methods:{
26          tabToggle:function(index){
27             this.num = index;
28          }
29        }
30      })
31     
32     </script>