vue 全选与反选的实现方法(无Bug 新手看过来)

2018-02-10 13:11:53来源:作者:人点击

分享

我就废话不多说,直接上代码吧!

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="app"><div style="padding-left: 20px"><ul style="margin-bottom: 20px"> <li v-for="(item, index) in proData"><input type="checkbox" :value="index" v-model="selectArr">{{item.name}}</li></ul><label> <input type="checkbox" @click="selectAll" :checked="checked"/>全选 </label> </div> </div></body><script src="https://cdn.jsdelivr.net/npm/vue"></script><script type="text/javascript">var vm = new Vue({el : "#app",data : {proData: [   { "name": "张三"}, { "name": "李四"}, { "name": "王五"}, { "name": "赵六"}],   selectArr: [],   checked : false},watch : { selectArr(curVal){ if(curVal.length == this.proData.length){ this.checked = true }else{ this.checked = false } } }, methods: {  selectAll(event){   if (!event.currentTarget.checked) {    this.selectArr = [];   } else { //实现全选    this.selectArr = [];    this.proData.forEach((item, i) =>{     this.selectArr.push(i);    });   }  } }})</script></html>

如果有bug,请告知!

以上这篇vue 全选与反选的实现方法(无Bug 新手看过来)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持第七城市。

您可能感兴趣的文章:

  • vue2.0在table中实现全选和反选的示例代码
  • vue实现全选和反选功能
  • vue实现全选、反选功能
  • 利用Vue.js实现checkbox的全选反选效果

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台