zoukankan      html  css  js  c++  java
  • vue购物车全选同步单选逻辑处理

    一 单选同步多选

     (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;
          });
        },
  • 相关阅读:
    HttpWebRequest请求超时的解决方案!
    HttpWebRequest常用问题!
    System.IO 的三个抽象类
    枚举
    IINQ 的链接
    怎么样将sql server数据库中的结构导入到powerdesign中
    System.IO的三个静态类
    System.IO TextReader的二个子类
    学习序列化
    LookAndFeel枚举说明
  • 原文地址:https://www.cnblogs.com/sdfdfd/p/12989248.html
Copyright © 2011-2022 走看看