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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
JavaScript 对象、函数和继承
Jul 07 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
微信小程序实现页面左右滑动
Nov 16 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
PHP mysql事务问题实例分析
2016/01/18 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
Prototype Hash对象 学习
2009/07/19 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
jquery操作select大全
2014/04/25 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
python实现简易淘宝购物
2019/11/22 Python
Python新手学习标准库模块命名
2020/05/29 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
性能服装:HYLETE
2018/08/14 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
兰兰过桥教学反思
2014/02/08 职场文书
2014年三万活动总结
2014/04/26 职场文书
成都人事代理协议书
2014/10/25 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
行为规范主题班会
2015/08/13 职场文书
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技