用vue來實現一個小的選項卡切換，比之前要簡單、方便很多。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/vue.min.js"></script> <style> button{ width:40px; height:30px; text-align:center; border:none; cursor: pointer; } .active{ background:red; color:#fff; border:none; } </style> </head> <body> <div id="app"> <button v-for="(val,key) in box" @click="changes(key)" :class="{active:key == num}" >{{key+1}}</button> <div v-for="(val,key) in box" v-show="key==num" >{{val}}</div> </div> <script> /* 運用知識點： v-for v-on,簡寫@ v-bind簡寫: v-show 思路： 循環數據，當點擊時候，把key傳到changes方法中，然后num賦值給active 循環數組，只要box中key等於num就讓它顯示出來 */ new Vue({ el:'#app', data:{ box:['俄克拉荷馬','薩克拉門托','明尼蘇達'], num:0 }, methods:{ changes(key){ this.num = key; } } }); </script> </body> </html>