利用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 相关文章推荐
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
python 检查文件mime类型的方法
2018/12/08 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
使用Python pip怎么升级pip
2020/08/11 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
Python如何实现机器人聊天
2020/09/10 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
一份Java笔试题
2012/02/21 面试题
大班上学期幼儿评语
2014/04/30 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers