vue checkbox 全选 数据的绑定及获取和计算方法
更新时间:2018年02月09日 11:21:36 作者:Thekingyu
下面小编就为大家分享一篇vue checkbox 全选 数据的绑定及获取和计算方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
html
<input type='checkbox' v-model='checkboxModel' :value='z.coach_id+"-"+z.amount' :i="dianji" @click="lll">
第一个CheckBox
<span><input type='checkbox' v-model='checked' v-on:click='checkedAll'><span class="select-all">全选</span></span>
第二个
定义
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; } },
以上这篇vue checkbox 全选 数据的绑定及获取和计算方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
一文了解Vue 3 的 generate 是这样生成 render&n
本文介绍generate阶段是如何根据javascript AST抽象语法树生成render函数字符串的,本文中使用的vue版本为3.4.19,感兴趣的朋友跟随小编一起看看吧2024-06-06vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输。重点给大家介绍vue中的$emit 与$on父子组件与兄弟组件的之间通信方式,感兴趣的朋友一起看看2018-05-05
最新评论