vue使用监听实现全选反选功能


Posted in Javascript onJuly 06, 2018

最近在学习vue这一块的内容,在项目中用到了全选全不选的功能,开始的时候借鉴了别人写的功能,但感觉写的有一些缺陷,然后就自己写了一套,如有写的不好的地方,请各位大佬指教,废话不多说,上代码。

首先定义数据

data: {
   /*全选、全不选*/
   allCheck:false,//全选功能
   //循环数据
   checkArr:[
     {cityName:"东城区",isCheck:false},
     {cityName:"西城区",isCheck:false},
     {cityName:"朝阳区",isCheck:false},
     {cityName:"丰台区",isCheck:false},
   ],
}

然后是页面代码:

<div>
   <div v-for="carType in checkArr">
     <p>
       <input type="checkbox" v-model="carType.isCheck"/>
       <a href="javascript:void(0)" rel="external nofollow" >{{carType.typeName}}</a>
    </p>
   </div>
</div>
<div>
  <input type="checkbox" id="chooseAllType" v-model="allCheck" @click="selectAll(allCheck)"/>
  全选
</div>

下面是js中代码

methods: {
  /*点击全选,选中所有复选框*/
  selectAll: function (data) {
    var _this = this;
    //如果父级被选中,那么子集循环,全被给checked=true
    if (!data) {
      _this.checkArr.forEach(function (item) {
        item.isCheck = true;
      });
    } else {
      //相反,如果没有被选中,子集应该全部checked=false
      _this.checkArr.forEach(function (item) {
        item.isCheck = false;
      });
    }
  },
}

下面是监听部分代码,主要功能为如果子集全部选中,全选按钮同样被勾选

watch:{
  /*监听全选事件*/
  checkArr:{
    handler(value){
      var _this = this;
      var count=0;
      for(var i=0;i<value.length;i++){
        if(value[i].isCheck==true){
          count++;
        }
      }
      //如果子集全部选中,全选按钮设置选中状态
      if(count==value.length){
        _this.allCheck=true;
      }else{
        _this.allCheck=false;
      }
    },
    deep:true
  },
}

总结

以上所述是小编给大家介绍的vue使用监听实现全选反选功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
JS实现简单的九宫格抽奖
Jun 28 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 #Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 #Javascript
javascript显示动态时间的方法汇总
Jul 06 #Javascript
Django+Vue跨域环境配置详解
Jul 06 #Javascript
微信小程序画布圆形进度条显示效果
Nov 17 #Javascript
微信小程序实时聊天WebSocket
Jul 05 #Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 #Javascript
You might like
php email邮箱正则
2008/10/08 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
解析php中curl_multi的应用
2013/07/17 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
js实现通过开始结束控制的计时器
2019/02/25 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Python编码爬坑指南(必看)
2016/06/10 Python
pandas数值计算与排序方法
2018/04/12 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
python Tensor和Array对比分析
2020/01/08 Python
如何理解Python中包的引入
2020/05/29 Python
反腐倡廉标语
2014/06/24 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
小学见习报告
2014/10/31 职场文书
齐云山导游词
2015/02/06 职场文书
大班下学期个人总结
2015/02/13 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书