利用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 语法集锦 脚本之家基础推荐
Nov 15 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
vue的三种图片引入方式代码实例
Nov 19 Javascript
js实现简单点赞操作
Mar 17 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
微信小程序的动画效果详解
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
Terran建筑一览
2020/03/14 星际争霸
PHP安装全攻略:APACHE
2006/10/09 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
javascript数组去重小结
2016/03/07 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
质量保证书范本
2014/04/29 职场文书
师范生求职自荐信
2014/06/14 职场文书
2015公司年度工作总结
2015/05/14 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers