利用Vue.js实现checkbox的全选反选效果


Posted in Javascript onJanuary 18, 2017

前言

这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了。后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧.

html示例代码

<template>
 <div>
 <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'>全选
 <template v-for='checkb in checkboxData'>
 <input type='checkbox' name='checkboxinput' class='input-checkbox' v-model='checkboxModel' value='{{checkb.id}}'>{{checkb.value}}
 </template>
 </div>
</template>

js示例代码

<script>
export default {
methods:{
 checkedAll: function() {
 var _this = this;
 console.log(_this.checkboxModel);
 if (this.checked) {//实现反选
 _this.checkboxModel = [];
 }else{//实现全选
 _this.checkboxModel = [];
 _this.checkboxData.forEach(function(item) {
 _this.checkboxModel.push(item.id);
 });
 }
 }
},
watch: {//深度 watcher
 'checkboxModel': {
 handler: function (val, oldVal) { 
 if (this.checkboxModel.length === this.checkboxData.length) {
 this.checked=true;
 }else{
 this.checked=false;
 }
 },
 deep: true
 }
},
data () {
 return {
 checkboxData:[{
 id:'1',
 value:'苹果'
 },{
 id:'2',
 value:'荔枝'
 },{
 id:'3',
 value:'香蕉'
 },{
 id:'4',
 value:'火龙果'
 }],
 checkboxModel:['1','3','4'],
 checked:""
 }
}
}
</script>

watch

类型: Object

详细:

一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $watch()

示例:

var vm = new Vue({
 data: {
 a: 1
 },
 watch: {
 'a': function (val, oldVal) {
 console.log('new: %s, old: %s', val, oldVal)
 },
 // 方法名
 'b': 'someMethod',
 // 深度 watcher
 'c': {
 handler: function (val, oldVal) { /* ... */ },
 deep: true
 }
 }
})
vm.a = 2 // -> new: 2, old: 1

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
可插入图片的TEXT文本框
Dec 27 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
微信小程序的动画效果详解
Jan 18 #Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 #Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 #Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 #Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 #Javascript
vue.js+Element实现表格里的增删改查
Jan 18 #Javascript
JS中Array数组学习总结
Jan 18 #Javascript
You might like
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python函数返回值实例分析
2015/06/08 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
.net面试题
2015/12/22 面试题
2014年企业工会工作总结
2014/11/12 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
Golang 编译成DLL文件的操作
2021/05/06 Golang
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js