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(){//商品列表循环Numlet data = [];//创建一个空数组let newtitle = this.Size.filter(item=>item.availableSizes)//将对比后的SIzethis.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的方法）

今天就到这里。

晚安！

react-shopping-cart尺码筛选相关推荐

magento Shopping Cart Price Rule 购物车促销规则
magento 有着强大的促销规则设置,能满足许多常规的促销手段. (当然在现实问题中,我们在很多地方是需要定制开发的.) 这里主要解析下magento 的 Shoppping Cart Price ...
（翻译）购物车模式（Shopping Cart）
PS:新春将至,恭祝各位朋友春节快乐,生活事业双丰收!!! 问题概述对照现实世界,提升网上购物体验. 示例用途用于当用户可能购买一件以上商品时: 用于当用户可能购买多件同类商品时: 用于当用 ...
购物车（Shopping cart） —— B2C网站核心产品设计（二）
购物车是做什么的? 我们先来看一下现实超市中的购物车,一个带四个轱辘的铁筐子,客人推来推去,看到什么东西喜欢,就扔进去,觉得东西差不多了,就推到收银台.
react 监听组合键_投资组合中需要的5个React项目
react 监听组合键 You've put in the work and now you have a solid understanding of the React library. 您已经完 ...
react 交互_如何在React中建立动画微交互
react 交互 Microinteractions guide a user through your application. They reinforce your user experienc ...
react大数据量渲染_UseEffect在React中运行无限渲染（超过最大更新深度）
我有一个Cart组件,里面有一系列Cards. 每次用户从购物车中删除产品时,我都会从本地存储中删除产品, 并将其从用户界面中删除. import React, { useState, useEffe ...
【Storybook】Storybook在React中的使用
本文将结合自身使用Storybook近半年的感受从: 什么是Storybook? 为什么要使用Storybook? 如何快速使用Storybook? 自定义Webpack配置代理设置这几个方面来介 ...
产品列表页分类筛选、排序的算法实现（PHP）
一.简单的单条件查询工作都是从简单的开始,先从最简单的单表查询开始,这个一般用在首页以及一些比较独立的页面,只需要查找几个符合条件的产品展示出来即可,可以使用分页或者不使用分页.下面这个是产品控制器 ...
react 购物车组件
import React from 'react' import { Component } from 'react' import "./cart.css" // 纯显示的组件 ...
cart购物车php文件,php购物车实现方法，php购物车实现
php购物车实现方法,php购物车实现本文实例讲述了php购物车实现方法.分享给大家供大家参考.具体分析如下: 这里我们为你提供个简单的php购物车代码,从增加购物产品与发生购买了,在商城开发中,这 ...

react-shopping-cart尺码筛选

react-shopping-cart尺码筛选相关推荐

最新文章

热门文章