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 相关文章推荐
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
微信小程序实现签到功能
2018/10/31 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
Python处理Excel文件实例代码
2017/06/20 Python
python正则实现提取电话功能
2018/02/24 Python
解决python删除文件的权限错误问题
2018/04/24 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
Django forms组件的使用教程
2018/10/08 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
高分子材料个人求职信范文
2013/09/25 职场文书
小学毕业家长寄语
2014/01/19 职场文书
闭幕式主持词
2014/04/02 职场文书
坎儿井导游词
2015/02/09 职场文书
六五普法心得体会2016
2016/01/21 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server