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 相关文章推荐
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
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网站提速三大“软”招
2006/10/09 PHP
PHP中的类-什么叫类
2006/11/20 PHP
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
详解javascript高级定时器
2015/12/31 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
python解决网站的反爬虫策略总结
2016/10/26 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
python解包概念及实例
2021/02/17 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
成教自我鉴定
2013/10/27 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
中学教师师德承诺书
2014/05/23 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android