1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Tab選項卡</title> 6 <script src="js/vue.js"></script> 7 <style> 8 *{ 9 margin: 0px; 10 padding: 0px; 11 } 12 #tab{ 13 width:420px; 14 margin: 20px auto; 15 position: relative; 16 } 17 #tab ul li{ 18 width: 100px; 19 height: 30px; 20 border: 1px solid #6699CC; 21 float: left; 22 list-style: none; 23 text-align: center; 24 line-height: 30px; 25 } 26 #tab ul li:first-child{ 27 border-right: none; 28 border-radius: 10px 0px 0px 0px; 29 } 30 #tab ul li:last-child{ 31 border-left: none; 32 border-radius: 0px 10px 0px 0px; 33 } 34 #tab ul .active{ 35 background-color:#6699CC; 36 color:white; 37 } 38 #tab div{ 39 width: 415px; 40 position: absolute; 41 top: 32px; 42 display: none; 43 } 44 #tab div img{ 45 width: 406px; 46 border-radius:0px 0px 10px 10px; 47 } 48 #tab div.current{ 49 display: block; 50 } 51 52 </style> 53 </head> 54 <body> 55 <div id="tab"> 56 <ul> 57 <li v-on:mouseover="change(index)" :class="[currentindex==index?'active':'']":key="item.id"v-for="(item,index) in list">{{item.text}}</li> 58 </ul> 59 <div :class="[currentindex==index?'current':'']" v-for="(item,index) in list"> 60 <img :key="item.id" v-bind:src="item.imgsrc"/> 61 </div> 62 </div> 63 <script> 64 var vue1 = new Vue({ 65 el:'#tab', 66 data:{ 67 currentindex:'0',//當前選項卡的索引 68 list:[{ 69 id:'1', 70 text:'春', 71 imgsrc:'img/1.jpg' 72 },{ 73 id:'2', 74 text:'夏', 75 imgsrc:'img/2.jpg' 76 },{ 77 id:'3', 78 text:'秋', 79 imgsrc:'img/3.jpg' 80 },{ 81 id:'4', 82 text:'冬', 83 imgsrc:'img/4.jpg' 84 }] 85 }, 86 methods:{ 87 change:function(index){ 88 this.currentindex=index; 89 } 90 } 91 }); 92 </script> 93 </body> 94 </html>
歡迎大家閱讀，本人見識有限，寫的博客難免有錯誤或者疏忽的地方，還望各位指點，在此表示感激不盡。文章持續更新中…