利用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 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
JScript实现地址选择功能
Aug 15 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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
php 文章调用类代码
2011/08/11 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python 文件处理注意事项总结
2017/04/10 Python
对python Tkinter Text的用法详解
2018/10/11 Python
python实现淘宝购物系统
2019/10/25 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
经济信息系毕业生自荐信范文
2014/03/15 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
母亲节主题班会
2015/08/14 职场文书
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技