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 相关文章推荐
超简单的jquery的AJAX用法
May 10 Javascript
javascript调试说明
Jun 07 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
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
Yii2.0预定义的别名功能小结
2016/07/04 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
js使用递归解析xml
2014/12/12 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
Django中使用locals()函数的技巧
2015/07/16 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
Python验证码截取识别代码实例
2020/05/16 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
材料采购员岗位职责
2013/12/17 职场文书
幼儿教师培训感言
2014/03/08 职场文书
人力资源管理求职信
2014/08/07 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
高中运动会广播稿
2014/09/16 职场文书
清洁员岗位职责
2015/02/15 职场文书
入党函调证明材料
2015/06/19 职场文书
Pygame Time时间控制的具体使用详解
2021/11/17 Python
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS