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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
Vue 中使用 typescript的方法详解
Feb 17 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
PHP 金额数字转换成英文
2010/05/06 PHP
php在线代理转向代码
2012/05/05 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
python中字符串前面加r的作用
2015/06/04 Python
浅谈python数据类型及类型转换
2017/12/18 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
详解Python 解压缩文件
2019/04/09 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
大学生就业自荐信
2013/10/26 职场文书
入党转预备思想汇报
2014/01/07 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
操行评语大全
2014/04/30 职场文书
新闻编辑求职信
2014/07/13 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
2014年体育部工作总结
2014/11/13 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript