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>

 

预览：

 

 

posted @ 2019-12-05 11:07  方歌阙丶AAA  阅读(2258)  评论(0)    收藏  举报