vue实现全选和反选功能


Posted in Javascript onAugust 31, 2017

本文实例为大家分享了vue实现全选反选功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script type="text/javascript" src = "vue.js"></script>
<body>
    <div id = "test">
      <input type='checkbox' v-model="checkBox.checked" class='input-checkbox' @click='checkedAll'>全选
      <div v-for='checkb in checkboxData'>
        <input  type='checkbox' class='input-checkbox' @click="checkItem" v-model='checkBox.items[checkb.id]'>
        {{checkb.value}}
      </div>

    </div>

</body>
<script>
  var vue = new Vue({
    el:"#test",
    data:{
      checkboxData:[
      {
        id:'1',
        value:'苹果'
      },{
        id:'2',
        value:'荔枝'
      },{
        id:'3',
        value:'香蕉'
      },{
        id:'4',
        value:'火龙果'
      }
      ],
      checkBox:{
        checked:false,
        items:{}
      }

    },
    methods:{
      checkedAll: function() {
        var _this = this;
        console.log(_this.checkboxData);
        console.log(this.checkBox.items);
        this.checkboxData.forEach(function (item) {
          console.log(item.id);
          _this.checkBox.items[item.id] = _this.checkBox.checked;
          console.log(_this.checkBox.items);
        });
        //实现反选

      },
      checkItem:function(){
        var unchecked = 0;
        var _this = this;
        this.checkboxData.forEach(
          function(item) {
            unchecked += (! _this.checkBox.items[item.id]) || 0;
          });
        _this.checkBox.checked = unchecked > 0 ? false : true;
      }

    }

  })
</script>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
js实现车辆管理系统
Aug 26 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
浅谈Vue 初始化性能优化
Aug 31 #Javascript
Vue keep-alive实践总结(推荐)
Aug 31 #Javascript
深入理解vue-router之keep-alive
Aug 31 #Javascript
vue-router 导航钩子的具体使用方法
Aug 31 #Javascript
浅谈express 中间件机制及实现原理
Aug 31 #Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 #Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
PHP 表单提交给自己
2008/07/24 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
DWR Ext 加载数据
2009/03/22 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
python局部赋值的规则
2013/03/07 Python
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
python调用摄像头显示图像的实例
2018/08/03 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
python定时任务 sched模块用法实例
2019/11/04 Python
Python几种常见算法汇总
2020/06/02 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
春游踏青活动方案
2014/08/14 职场文书
大学生赌博检讨书
2014/09/22 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
复兴之路展览观后感
2015/06/02 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
Mysql开启外网访问
2022/05/15 MySQL