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 相关文章推荐
网页打开自动最大化的js代码
Aug 22 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 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
德生1994机评
2021/03/02 无线电
PHP文本数据库的搜索方法
2006/10/09 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
php调用c接口无错版介绍
2014/03/11 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
js实现登录验证码
2016/12/22 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python中rb含义理解
2020/06/18 Python
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
高中的职业生涯规划书
2013/12/28 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
法定代表人证明书
2014/11/28 职场文书
新郎结婚保证书
2015/02/26 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android