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 相关文章推荐
jQuery的一些特性和用法整理小结
Jan 13 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
浅谈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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
第1次亲密接触PHP5(2)
2006/10/09 PHP
PHP程序员编程注意事项
2008/04/10 PHP
php array的学习笔记
2012/05/16 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
vue中的inject学习教程
2019/04/24 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
Angular单元测试之事件触发的实现
2020/01/20 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
Python中函数的返回值示例浅析
2019/08/28 Python
Flask处理Web表单的实现方法
2021/01/31 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
大学生学习党课思想汇报
2014/01/03 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
领导干部作风建设总结
2014/10/23 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
python实现局部图像放大
2021/11/17 Python
Pandas 数据编码的十种方法
2022/04/20 Python