1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .active{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <ul id="change"> 14 <li v-for="(m,index) in content" @click="doActive(index)" :class="{active:index==current}">{{m}}</li> 15 </ul> 16 <script src="../js/vue.js"></script> 17 <script> 18 let eg = new Vue({ 19 el:"#change", 20 data:{ 21 current:0, 22 content:['aaa','bbb','ccc','ddd','eee'] 23 }, 24 methods:{ 25 doActive:function(index){ 26 this.current = index; 27 } 28 } 29 }) 30 </script> 31 </body> 32 </html>
每次點擊時將當前被點擊的li的索引串到doActive中
current 用於保存該索引
v-bind的對象語法 當index==current的時候會為當前li增加active的class