<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .on{ color: red; } </style> </head> <body> <div id="app"> <ul> <li :class="{'on':indexList.indexOf(index)>-1}" v-for="(item,index) in heros" @click="change(index)">{{item}}</li> </ul> </div> </body> <script src="../../js/vue.js"></script> <script> new Vue({ el:"#app", data:{ heros:['雷恩加尔','安妮','沃里克','德莱厄斯'], indexList:[] }, methods:{ change(index){ let arrIndex = this.indexList.indexOf(index); console.log(arrIndex) if (arrIndex > -1){ this.indexList.splice(arrIndex,1) }else{ this.indexList.push(index) } console.log(this.indexList) } } }) </script> </html>
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>