利用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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
List Information About the Binary Files Used by an Application
Jun 11 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 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性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
python将list转为matrix的方法
2018/12/12 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
dpn网络的pytorch实现方式
2020/01/14 Python
python的help函数如何使用
2020/06/11 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
电气个人求职信范文
2014/02/04 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
民事二审代理词
2015/05/25 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
SSM VUE Axios详解
2021/10/05 Vue.js