码迷,mamicode.com
首页 > 其他好文 > 详细

vue中复选框全选与反选

时间:2019-01-24 17:55:41      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:inpu   his   比较   好用   思路   赋值   过滤   span   dex   

  html主要部分: 

<template v-for="(item, index) in checkboxList">
  <input type="checkbox" v-model="selectList" :value="item">
</template>

  初始化selectList = [],checkboxList = [‘苹果‘, ‘橡胶‘, ‘梨‘, ‘桃子‘]。

  首先说全选事件,这个比较好弄。就是每次触发事件的时候先清空selectList,然后将checkboxList的值赋值给selectList就行了。

  

  反选事件。所谓反选就是先判断如果有选中的则将其状态变为未选中,未选中则将其状态变为选中。

  今天偶然发现一个很好用的方法,就是借鉴两个数组,判断是否有相同元素,然后去重这种思路来解决反选问题。

const _this = this
let checkboxList = _this.checkboxList  let selectList = _this.selectList let tempArr1 = [] let tempArr2 = [] if (!_this.selectList.length) { _this.selectList = _this.checkboxList  } else { for (let i = 0, len = selectList.length; i < len; i ++) { tempArr1[selectList[i]] = true //将数selectList中的元素值作为tempArr1中的键,值为true
} for(var j=0, lenj = checkboxList.length;j < lenj;j++){ if(!tempArr1[checkboxList[j]]){ tempArr2.push(checkboxList[j]); // 过滤checkboxList与selectList中相同的元素 } } _this.selectList = tempArr2 }

 

  

 

vue中复选框全选与反选

标签:inpu   his   比较   好用   思路   赋值   过滤   span   dex   

原文地址:https://www.cnblogs.com/jf-67/p/10315865.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!