先上代碼
<!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>
預覽：
