Vue-选项卡切换

 1 <html>
 2   <head>
 3     <title>Vue实现tab切换效果</title>
 4     <script src="vue.js"></script>
 5     <style type="text/css">
 6      *{
 7         margin:0;
 8         padding:0;
 9      }
10      
11      #tab{
12         width:368px;
13         height:200px;
14         border:1px solid #ccc;
15         margin:20px auto;
16      }
17      
18      ul li {
19         float:left;
20         list-style:none;
21         width:90px;
22         height:30px;
23         text-align:center;
24         line-height:30px;
25         border:1px solid #ccc;
26      }
27      
28      ul li:hover{
29         cursor:pointer
30      }
31      
32      .active {
33         color:red;
34      }
35      
36      .tabCon {
37         clear:left;
38         padding:4px 0 0 6px; 
39      }
40     </style>
41   </head>
42   <body>
43     <div id="tab">
44       <ul>
45         <li 
46         v-for="(tab, index) in tabs" 
47         :class="{active:index == nowIndex}"
48         @click="tabToggle(index)">
49           {{ tab }}
50         </li>
51       </ul>
52       <div class="tabCon">
53         <div class="divTab" v-show="nowIndex === 0">内容一</div>
54         <div class="divTab" v-show="nowIndex === 1">内容二</div>
55         <div class="divTab" v-show="nowIndex === 2">内容三</div>
56         <div class="divTab" v-show="nowIndex === 3">内容四</div>
57       </div>
58     </div>
59     <script>
60      new Vue({
61        el:"#tab",
62        data:{
63          tabs:["新闻排行","图片排行","视频排行","游戏排行"],
64          nowIndex:0
65        },
66        methods:{
67          tabToggle:function(index){
68             this.nowIndex = index;
69          }
70        }
71      })
72     
73     </script>
74   </body>
75 </html>
显示如下：
Vue-选项卡切换

推荐阅读
