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

Select all to implement data binding and acquisition in vue

亚连

Release： 2018-06-06 15:05:16

Original

1766 people have browsed it

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

<input type=&#39;checkbox&#39; v-model=&#39;checkboxModel&#39; :value=&#39;z.coach_id+"-"+z.amount&#39; :i="dianji" @click="lll">

Copy after login

First CheckBox

<span><input type=&#39;checkbox&#39; v-model=&#39;checked&#39; v-on:click=&#39;checkedAll&#39;><span class="select-all">全选</span></span>

Copy after login

The second

Definition

return {
 dianji:&#39;12&#39;,
 list: [],
 value:{},
 value1:{},
 checkAll: false,
 checkArr:[],
 checkboxModel:[],
 wodeshi:&#39;0&#39;,
 checked:false
}
lll: function(){
 var self = this;
 var sum=0;
 setTimeout(function(){
 for(var x in self.checkboxModel){
 sum += parseInt(self.checkboxModel[x].split(&#39;-&#39;)[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+&#39;-&#39;+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(&#39;-&#39;)[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!