vue实现选中li变色--小技巧

<!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>