vue实现多选和取消多选的效果

本文介绍了在Vue.js中如何实现列表的全选与单选功能。通过v-for循环遍历list,使用v-model绑定item.checked,结合change事件处理函数,实现了单个item的选择与全选状态的同步。当所有item都被选中时,全选框自动勾选,反之则取消。同时,提供了简化版的代码实现,利用every()方法判断是否所有元素都被选中,优化了代码逻辑。
摘要由CSDN通过智能技术生成
一、要实现的效果

1.当点击“全选”时,能全选所有;
在这里插入图片描述
2.点取消掉列表的某个input框时,“全选”框不被选择;
在这里插入图片描述

二、html结构

前提: v-for循环遍历list,列表中的每个item都有checked属性,用v-model绑定item.checked;input标签有change方法,当值改变时生效
(1)单选:

<div v-for="(i,index) in list">
            <input type="checkbox"
              v-model="i.checked"
              @change="checkboxSelect" />
</div>

(2)全选:

        <div class="checkbox text">
          <input type="checkbox"
            v-model="checkAll"
            @change="checkAllChange">全选
        </div>
三、method方法

(1)单选:

    checkboxSelect() {
      // 选中的个数
      var num = this.list.filter(item => item.checked).length;
      // console.log(num);
      if (num == this.list.length) {
      //如果选中的数量为数组的长度,则全选框被选择
        this.checkAll = true
      } else {
        this.checkAll = false
      }
    },

可简化为:

    checkboxSelect() {
      // every()检测数组中的元素是否符合条件,如果元素都满足条件,返回true;
      //只要有一个不满足,返回false
      this.checkAll = this.list.every(item => item.checked)
    }

(2)全选

    checkAllChange() {
      this.list.forEach(item => {
        // 把每个item的checked属性 设为 与全选框一致的值
        item.checked = this.checkAll
        // console.log('checkAllChange', item.checked)
      })
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值