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 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
ES6关于Promise的用法详解
May 07 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 Javascript
jQuery实现本地存储
Dec 22 jQuery
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
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
python中while循环语句用法简单实例
2015/05/07 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python正则表达式面试题解答
2020/04/28 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
应用化学专业本科生求职信
2013/09/29 职场文书
大一军训感言
2014/01/09 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
医学专业自荐信
2014/06/14 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
辩护意见书
2015/06/04 职场文书
无房证明样本
2015/06/17 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
深入理解python多线程编程
2021/04/18 Python
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏