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日历功能对象
Jan 12 Javascript
js脚本实现数据去重
Nov 27 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 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产生动态的影像图
2006/10/09 PHP
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
python web基础之加载静态文件实例
2018/03/20 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
python3中rank函数的用法
2019/11/27 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
《搭石》教学反思
2014/04/07 职场文书
初中同学会活动方案
2014/08/22 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
Python 内置函数速查表一览
2021/06/02 Python