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 相关文章推荐
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
jsPDF导出pdf示例
May 02 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 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懒人函数 自动添加数据
2011/06/28 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
vue自定义指令用法经典实例小结
2019/03/16 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
Python实现的简单计算器功能详解
2018/08/25 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
行政办公员自我评价分享
2013/12/14 职场文书
财务总经理岗位职责
2014/02/16 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
主要领导对照检查材料
2014/08/26 职场文书
运动会广播稿20字
2015/08/19 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang