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 相关文章推荐
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
浅谈React Event实现原理
Sep 20 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 Javascript
js数组的基本使用总结
Jan 18 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/26 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
javascript 禁止复制网页
2009/06/11 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
一分钟理解js闭包
2016/05/04 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
如何利用Python 进行边缘检测
2020/10/14 Python
python 写一个水果忍者游戏
2021/01/13 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
大学生村官典型材料
2014/01/12 职场文书
医生进修自我鉴定
2014/01/19 职场文书
旅游安全协议书
2014/04/21 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书