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>
显示如下：
