vue 实现全选全不选的示例代码


Posted in Javascript onMarch 29, 2018

全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目。从jQuery到vue的转变主要是一个思想想的转变,是将原有的直接操作dom的思想转变到操作数据,用数据驱动dom,也是vue框架的一个核心思想,思想转变过来,对功能的实现自然容易理解一些。

例如下面这个简单的demo

vue 实现全选全不选的示例代码

按照jQuery的思想来做的话,要选中全选checkbox和所有的checkbox项,分别注册选中事件,判断选中状态来给相关的checkbox设置对应的状态,这就涉及到很多的dom操作。

下面就看一下vue数据驱动dom的思想来实现这一功能。

vue数据驱动dom实现功能

<div class="checkbox">
  <label for="quan">
    <!-- 这里的 $event 是将当前对象传入进去,具体详情请参照vue官方文档 -->
    <input id="quan" type="checkbox" @click="checkAll($event)"> 全选
  </label>
  <label>
    <!-- v-model 双向数据绑定命令 -->
    <input class="checkItem" type="checkbox" value="apple" v-model="checkData"> apple
  </label>
  <label>
    <input class="checkItem" type="checkbox" value="banana" v-model="checkData"> banana
  </label>
  <label>
    <input class="checkItem" type="checkbox" value="orange" v-model="checkData"> orange
  </label>
</div>
<script>
  new Vue({
    el: '#app',
    data(){
      return {
        checkData: [] // 双向绑定checkbox数据数组
      }
    },
    watch: { // 监视双向绑定的数据数组
      checkData: {
        handler(){ // 数据数组有变化将触发此函数
          if(this.checkData.length == 3){
            document.querySelector('#quan').checked = true;
          }else {
            document.querySelector('#quan').checked = false;
          }
        },
        deep: true // 深度监视
      }
    },
    methods: {
      checkAll(e){ // 点击全选事件函数
        var checkObj = document.querySelectorAll('.checkItem'); // 获取所有checkbox项
        if(e.target.checked){ // 判定全选checkbox的勾选状态
          for(var i=0;i<checkObj.length;i++){
            if(!checkObj[i].checked){ // 将未勾选的checkbox选项push到绑定数组中
              this.checkData.push(checkObj[i].value);
            }
          }
        }else { // 如果是去掉全选则清空checkbox选项绑定数组
          this.checkData = [];
        }
      }
    }
  });
</script>

利用vue的双向数据绑定v-model命令,当勾选时,checkbox的value值会自动push到所绑定的数组checkData中去,省去了不少对dom的操作。

如果是固定选项这样是可以实现的,但是这种方法有一些弊端,双向绑定数组数据是写死的,不太灵活,如果增加了checkbox选项,要更改wach里绑定数组的长度判断。

有时候checkbox选项也是后台动态获取过来的,这样也灵活一些。

例如后台数据是这样的:

ajaxData: [{
    name: 'a',
    value: 'apple'
  },{
    name: 'b',
    value: 'banana'
  },{
    name: 'c',
    value: 'orange'
  }]

需要先动态渲染checkbox选项,在进行数据绑定。

<div id="app">
  <div class="checkbox">
    <label for="quan">
      <!-- 这里的 $event 是将当前对象传入进去,具体详情请参照vue官方文档 -->
      <input id="quan" type="checkbox" @click="checkAll($event)"> 全选
    </label>
    <label v-for="item in ajaxData">
      <!-- v-model 双向数据绑定命令 -->
      <input class="checkItem" type="checkbox" :value="item.value" v-model="checkData"> {{item.name}}
    </label>
  </div>
</div>
<script>
  new Vue({
    el: '#app',
    data(){
      return {
        ajaxData: [{ // 后台请求过来的数据
          name: '选项1',
          value: 'apple'
        },{
          name: '选项2',
          value: 'banana'
        },{
          name: '选项3',
          value: 'orange'
        }],
        checkData: [] // 双向数据绑定的数组
      }
    },
    watch: {
      checkData: { // 监视双向绑定的数组变化
        handler(){
          if(this.checkData.length == this.ajaxData.length){
            document.querySelector('#quan').checked = true;
          }else {
            document.querySelector('#quan').checked = false;
          }
        },
        deep: true
      }
    },
    methods: {
      checkAll(e){ // 点击全选事件
        if(e.target.checked){
          this.ajaxData.forEach((el,i)=>{
            // 数组里没有这一个value才push,防止重复push
            if(this.checkData.indexOf(el.value) == '-1'){ 
              this.checkData.push(el.value);
            }
          });
        }else { // 全不选选则清空绑定的数组
          this.checkData = [];
        }
      }
    }
  });
</script>

vue 实现全选全不选的示例代码

方法并不是最优的写法,也存在一些弊端,欢迎各位指点迷津,一起探讨。

github地址:https://github.com/zhangqian00/

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

Javascript 相关文章推荐
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
React实现轮播效果
Aug 25 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 Javascript
Angular开发实践之服务端渲染
Mar 29 #Javascript
使用vue2实现购物车和地址选配功能
Mar 29 #Javascript
vue axios请求拦截实例代码
Mar 29 #Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 #Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 #jQuery
详解Javascript中new()到底做了些什么?
Mar 29 #Javascript
Koa2 之文件上传下载的示例代码
Mar 29 #Javascript
You might like
php输出指定时间以前时间格式的方法
2015/03/21 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
php读取本地json文件的实例
2018/03/07 PHP
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
python 字符串常用方法汇总详解
2019/09/16 Python
python实现批量文件重命名
2019/10/31 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
猫咪家具:CatsPlay
2018/11/03 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
室内设计自我鉴定
2013/10/15 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
工作态度检讨书
2014/02/11 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
新法人代表任命书
2014/06/06 职场文书
会计个人实习计划书
2014/08/15 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
大四学生个人总结
2015/02/15 职场文书
工会工作个人总结
2015/03/03 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers