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工具 Cookie 封装
Aug 21 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
js实现无缝滚动图
Feb 22 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 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的优点与缺点
2013/04/11 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
Dojo 学习要点
2010/09/03 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
python定时器使用示例分享
2014/02/16 Python
让 python 命令行也可以自动补全
2014/11/30 Python
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python 的内置字符串方法小结
2016/03/15 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
银行求职推荐信范文
2013/11/30 职场文书
商务主管岗位职责
2013/12/08 职场文书
科技工作者先进事迹
2014/08/16 职场文书
项目备案申请报告
2015/05/15 职场文书