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

本文转载自查看原文 2019-12-05 11:07 1063 vue

先上代码

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

预览：

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Vue实现点击li变色 vue实现筛选功能，文字选中变色 JavaScript实现li隔行变色关于table的td和ul元素li隔行变色的功能实现 echarts 柱状图的选中模式实现-被选中变色和再次选中为取消变色 jQuery实现表格选中行变色 react实现点击选中的li高亮 css技巧之如何实现ul li边框重合 vue动态绑定class 选中当前列表变色小程序关键字变色实现