react-shopping-cart尺码筛选

今天我们来写react-shopping-cart尺码筛选，先看效果

当点击选择Sizes时，列表只展示拥有该尺寸的衣服

当选择多个尺寸就会展示多种衣服(并不是叠加，而是只要有就展示)

 

但要注意的是，一件衣服会有两个或两个以上的尺寸，所以展示的时候要注意去重 

<h3>Sizes:</h3>
<ul>
   <li v-for="item in Size" :key="item.id">
      <input type="checkbox" :value="item.value" v-model="item.availableSizes">
      <span :class="{'active':item.availableSizes}">{{item.value}}</span>
   </li>
</ul>

const Size=[
  {
    id:0,
    value:"XS",
    availableSizes:false
  },{
    id:1,
    value:"S",
    availableSizes:false
  },{
    id:2,
    value:"M",
    availableSizes:false
  },{
    id:3,
    value:"ML",
    availableSizes:false
  },{
    id:4,
    value:"L",
    availableSizes:false
  },{
    id:5,
    value:"XL",
    availableSizes:false
  },{
    id:6,
    value:"XXL",
    availableSizes:false
  }
]

 注意要return  Size数据

data(){
    return{
      Size
    }
  },

    ul{
      list-style: none;
      height: 0.5rem;
      padding: 0 0.2rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      li{
        position: relative;
        input{
          opacity: 0;
          position: absolute;
          top: 0.14rem;
          right: 0.12rem;
        }
        span{
          float: left;
          height: 0.4rem;
          width: 0.4rem;
          border-radius: 50%;
          background: #eee;
          line-height: 0.4rem;
          text-align: center;
          font-size: 0.1rem;
          font-weight: 700;
        }
        .active{
          color: #fff;
          background: black;
        }
      }
    }

 availableSizes是JSON里面的数据，也就是商品本身的尺寸

Num(){//商品列表循环Num
      let data = [];//创建一个空数组
      let newtitle = this.Size.filter(item=>item.availableSizes)//将对比后的SIze
      this.list.map(item=>{//遍历
        item.availableSizes.map(a=>{
          if (newtitle.length!=0) {
            newtitle.map(v=>{
              if (a==v.value) {
                return data.push(item)
              }
            })
          }else{
            return data=this.list.map(item=>item)
          }
        })
      })
      // data = new Set(data)//去重 ES6，这种方法在这里不能使用
      let newdata = data.filter((item,index,a)=>{
        return a.indexOf(item) === index
      })//去重
}

给大家普及一些去重方法

1.filter和index of()

2. reduce()和includes()实现去重

 3.双重for循环 + splice() 或 双重for循环 +  push()      (ES5的方法）

今天就到这里。

晚安！