Select all to implement data binding and acquisition in vue-JS Tutorial-php.cn

Below I will share with you an article about vue checkbox select all data binding, acquisition and calculation methods. It has a good reference value and I hope it will be helpful to everyone.

html

Copy after login

First CheckBox

全选

Copy after login

The second

Definition

return { dianji:'12', list: [], value:{}, value1:{}, checkAll: false, checkArr:[], checkboxModel:[], wodeshi:'0', checked:false } lll: function(){ var self = this; var sum=0; setTimeout(function(){ for(var x in self.checkboxModel){ sum += parseInt(self.checkboxModel[x].split('-')[1]) } self.wodeshi=sum; },0) // console.log(self.checkboxModel) }, checkedAll: function() { var _this = this; if (this.checked) {//实现反选 _this.checkboxModel = []; }else{//实现全选 _this.checkboxModel = []; _this.list.forEach(function(z) { _this.checkboxModel.push(z.coach_id+'-'+z.amount); }); } if(_this.checkboxModel.length==0){ this.wodeshi=0; // console.log(_this.checkboxModel); }else { var self =this; var sum =0; for(var x in self.checkboxModel){ sum += parseInt(self.checkboxModel[x].split('-')[1]) } self.wodeshi=sum; } },

Copy after login

The above is what I compiled for everyone , I hope it will be helpful to everyone in the future.

How to use parent component to pass value to child component in vue-prop

In Node.js Use cheerio to make a simple web crawler (detailed tutorial)

How to implement parent components to pass multiple data to child components in vue

The above is the detailed content of Select all to implement data binding and acquisition in vue. For more information, please follow other related articles on the PHP Chinese website!