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 Array扩展实现代码
Oct 14 Javascript
javascript instanceof,typeof的区别
Mar 24 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
JavaScript中return false的用法
Mar 12 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
基本DOM节点操作
Jan 17 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 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小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
php 301转向实现代码
2008/09/18 PHP
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
php上传文件的增强函数
2010/07/21 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
Python 元类使用说明
2009/12/18 Python
python编码最佳实践之总结
2016/02/14 Python
Python中类型检查的详细介绍
2017/02/13 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
django中related_name的用法说明
2020/05/20 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
建筑总经理岗位职责
2014/02/02 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
会议邀请函
2015/01/30 职场文书
生死抉择观后感
2015/06/09 职场文书