vue实现购物车思想

vue实现购物车思想

一、问题:

实现购物车功能,具体如下

  1. 在该界面显示所有物品的列表,点击开菜显示购物车
    在这里插入图片描述

  2. 在该界面只显示订单的列表
    在这里插入图片描述

  3. 如何实现购物车数据的同步呢?

二、解决步骤

具体思路如下

  1. 首先,商品列表和订单列表为两个列表
  2. 在商品列表中,可能没有num字段,当点击加号时为列表的某个具体的商品加入num对象,这里注意vue的响应式渲染。最后将商品列表放入全局中。
  3. 当点击开菜的时候,将商品列表中为num存在且不为0的加入到订单列表中。
  4. 购物车遍历显示订单列表,订单列表内的商品都有num属性。
  5. 在购物车内改变商品的数目时,检测到num为0时调用过滤函数filter过滤了为0的数目。
  6. 购物车页关闭时,将订单列表更新到全局中。

购物车订单简单讲的思想

  1. 打开购物车时,会将商品列表中num非0的加入到订单列表。
  2. 在购物车内改变的是, 临时的订单列表。
  3. 在关闭购物车的时,将临时列表存到全局.
  4. 即使关闭购物车后,在商品列表做了新的调整,再次打开时,依然以商品列表为基准获取订单列表。
  5. 以此构成一个逻辑通顺的功能。
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值