vue checkbox 全选 数据的绑定及获取和计算方法


Posted in Javascript onFebruary 09, 2018

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 checkbox 全选 数据的绑定及获取和计算方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 居中漂浮广告
Mar 21 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 #Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 #Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 #Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 #Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 #Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 #Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 #Javascript
You might like
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
Python使用MONGODB入门实例
2015/05/11 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
python数据类型强制转换实例详解
2020/06/22 Python
降低python版本的操作方法
2020/09/11 Python
2014年五一促销活动方案
2014/03/09 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
2014教师年度工作总结
2014/11/10 职场文书
个人欠条范本
2015/07/03 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
python 如何用terminal输入参数
2021/05/25 Python