利用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 相关文章推荐
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
js实现不重复导入的方法
Mar 02 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
JavaScript定时器使用方法详解
Mar 26 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
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
location.href用法总结(最主要的)
2013/12/27 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python中的字符串替换操作示例
2016/06/27 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
python远程邮件控制电脑升级版
2019/05/23 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
Python实现弹球小游戏
2020/08/01 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
春季防火方案
2014/05/10 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
离职感谢信怎么写
2015/01/22 职场文书
办公室个人总结
2015/02/28 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书