首页 > 其他 > 详细

vue购物车全选同步单选逻辑处理

时间:2020-05-29 20:22:27      阅读:64      评论:0      收藏:0      [点我收藏+]

一 单选同步多选

 (1)单选添加一个点击事件,然后动态绑定checked

 如下:

  <input type="checkbox" v-on:click="checkedtoAll(item)" :checked="item.checked" />

  (2)在methods中,单选的状态取反,然后循环遍历购物车数组中的商品,如果每一个商品的选中状态都为true的话,则绑定的全选框的状态使与单选状态一样,即实现了单选同步多选

    多选框状态:

<input type="checkbox" v-model="allChecked" v-on:click="alltoChecked" />全选

  状态:

export default {
  data() {
    return {
      cartItem: [],
      allChecked: false
    };
  },

methods中逻辑处理:

  checkedtoAll(item) {
      item.checked = !item.checked;
      var checkedALL = this.cartItem.every(e => {
        return e.checked === true;
      });
      this.allChecked = checkedALL;
    }

二 多选同步单选

逻辑不同于单选,将多选状态取反,然后循环遍历购物车中的商品,使购物车中的每个商品的选中状态都与多选的选中状态相同

逻辑如下

 

 alltoChecked() {
      this.allChecked = !this.allChecked;
      //  window.console.log(this.allChecked)
      this.cartItem.forEach(e => {
        e.checked = this.allChecked;
      });
    },

 

vue购物车全选同步单选逻辑处理

原文:https://www.cnblogs.com/sdfdfd/p/12989248.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!