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 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
Angular2自定义分页组件
Apr 19 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
详解jenkins自动化部署vue
May 14 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 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
php限制ip地址范围的方法
2015/03/31 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
python实现字符串和日期相互转换的方法
2015/05/13 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
大学生校园创业计划书
2014/02/08 职场文书
搞笑征婚广告词
2014/03/17 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
房屋转让协议书
2014/10/18 职场文书
仓库管理制度范本
2015/08/04 职场文书
文艺委员竞选稿
2015/11/19 职场文书
学生安全责任协议书
2016/03/22 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers
MySQL创建管理子分区
2022/04/13 MySQL