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 相关文章推荐
使用javascipt---实现二分查找法
Apr 10 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 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过滤危险html代码
2008/08/18 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Python常见数字运算操作实例小结
2019/03/22 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
html5与css3小应用
2013/04/03 HTML / CSS
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
趣味活动策划方案
2014/02/08 职场文书
雷人标语集锦
2014/06/19 职场文书
委托书范本
2014/09/13 职场文书
教师求职自荐信范文
2015/03/04 职场文书
幽灵公主观后感
2015/06/09 职场文书
AJAX实现省市县三级联动效果
2021/10/16 Javascript