vue实现购物车思想

news2024/11/25 13:50:29

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. 以此构成一个逻辑通顺的功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/168080.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

day21-反射枚举

day21_反射&枚举 课程目标 1. 【理解】类加载器 2. 【理解】什么是反射 3. 【掌握】获取Class对象的三种方式 4. 【掌握】反射获取构造方法并创建对象 5. 【掌握】反射获取成员变量并使用 6. 【掌握】反射获取成员方法并使用 7. 【掌握】反射综合案例 8. 【理解】枚举类加…

在Ubuntu上安装 Hadoop 3详细过程(验证+填坑总结)

在Ubuntu上安装 Hadoop 3 前提条件: Python 推荐3.8JDK 推荐1.8 解压安装 sudo tar -zxvf hadoop-3.3.0.tar.gz -C /usr/local cd /usr/local sudo mv hadoop-3.3.0 hadoop sudo chown -R hadoop ./hadoop 配置环境变量 vim ~/.bashrc # hadoop export…

5、数组的创建和操作

目录 一、创建空数组、行向量、列向量 二、访问数组 三、 子数组的赋值(Assign) 四、其他创建数组的方式 1. 通过冒号创建一维数组 2.通过logspace函数创建一维数组 3.通过linspace函数创建一维数组 在MATLAB中一般使用方括号“[ ]”、逗号“,”、…

Python FastAPI 框架入门(一)【用于后端API快捷开发】

FastAPI 框架,高性能,易于学习,高效编码,生产可用 官方中文文档:FastAPI 框架中文文档 官方介绍: FastAPI 是一个用于构建 API 的现代、快速(高性能)的 web 框架,使用 Py…

【GD32F427开发板试用】-05-GD32F427移植Coremark

本篇文章来自极术社区与兆易创新组织的GD32F427开发板评测活动,更多开发板试用活动请关注极术社区网站。作者:申小林 如何在GD32F427开发板上移植CoreMARK? 1 下载CoreMARK源码 CoreMark开源的代码可以在Gitbub上自己做下载。 下载地址:ht…

CSS设置元素字体、降级使用字体、引入外部字体

设置元素字体 通过font-family属性,可以设置元素里面的字体样式。 font-family 可以把设置多个字体名称。 降级使用字体 几乎所有浏览器都有支持几种通用字体。比如: monospace,serif和sans-serif,当字体不可用,浏览器可以 “…

通过Docker启动Solace,并在Spring Boot通过JMS整合Solace

1 简介 Solace是一个强大的实时性的事件驱动消息队列。本文将介绍如何在Spring中使用,虽然代码使用的是Spring Boot,但并没有使用相关starter,跟Spring的整合一样,可通用。JMS是通过的消息处理框架,可以深入学习一下&…

02.指针的进阶1.练习题

1.辨析 //数组指针是一种指针,指向数组的指针 //数组指针是指向数组地址的指针 //回调函数是调用函数指针指向函数 EG1:杨氏矩阵 有一个数字矩阵,矩阵的每行从左到右是递增的,矩阵从上到下是递增的,请编写程序在这样的矩阵中…

微服务间通讯负载均衡以及日志

2.通信 HTTP ResthttpJSONRPC远程过程调用二进制 1.使用 RestTemplate RestTemplate restTemplate new RestTemplate(); String forObject restTemplate.getForObject("http://localhot:8888/user", String.class);其负载均衡有问题其无法实现健康检查 2.使用Ri…

新年新气象,跨境电商助推出口再创新高

受疫情等多方面影响,2022年纯棉纱进口量及产量均出现一定幅度地下滑。由于库存增加,消费量下降,供需矛盾也不断加剧。 新年新气象,2023年据预计纯棉纱产量将小幅回升,初步预计将达到535万吨,同比增加5.6%。…

Allegro如何快速打开和关闭层面操作指导

Allegro如何快速打开和关闭层面操作指导 在做PCB设计的时候,打开和关闭某个层面是非常频繁的操作,尤其是丝印等等层面。 Allgeo升级到了172版本的时候,可以将常用的层面添加到Visibility菜单里,就不需要频繁打开颜色管理器打卡和关闭层面了,如下图 具体操作如下 打开颜色…

归纳一下软件测试中「安全测试工具」

大家好啊,我是大田。今天归纳一下安全测试工具,分别用这些工具做哪些工作。自动化测试人员、功能测试人员平常可能用的不多,但是面试时也需要准备,需要知道安全测试工具有什么,还要关注现在有哪些漏洞。本篇先归纳整理…

vue3学习笔记之样式穿透(:deep)及CSS 新特性(:soltted、:gloabl、v-bind、mouldCSS)

文章目录1. scoped的原理2. :deep()3. :slotted()4. :global()5. 动态css(v-bind)6. css module1. scoped的原理 vue中的 scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式,以保证唯一(而这个工作是由过P…

如何使用极狐GitLab 机器人大幅提升研发效率

本文来自: 黄松 极狐GitLab 后端工程师 研发效率对互联网/科技类公司来说至关重要,效率高意味着你能用更低的人力、时间成本在市场试错,成功的概率也会更大。 而说到研发效率的常见阻碍,主要有两点: 1. 研发流程中需要…

基础二分查找总结

前言 由于我在学习二分查找的过程中处于会了忘,忘了复习的状态,因此总结一套适合自己记忆的模板。建议先看参考资料[1,2,3]^{[1,2,3]}[1,2,3],理解二分查找各种细节的由来。 二分查找又死循环了?【基础算法精讲 04】手把手带你撕出…

9656教程总结

9656 世界机器人大会青少年电子信息智能创新大赛官网少儿编程办学经验介绍机器人体验展馆体系课程知乎加盟介绍 知识点汇总 年龄 4-6岁 韩纳机器人主题体验馆 赛事 WRC世界机器人大赛, NOC全国中小学信息技术创新和实践大赛 5岁前:乐高积木,孩子年龄小只需对科特、编程…

事关网站数据安全,你真的了解https与SSL证书之间的关系吗?

虽然根据网上的建站教程,大多数站长都知道要给域名添加一个SSL证书,以此来开启https进而可以获得更好的用户体验以及提高网站的安全性。但是SSL证书为什么能使得网站https?你真的去细究过两者之间的关系吗?本文就来说说https与SSL…

python模拟三颗恒星的运动

文章目录随机三体三星问题随机三体 目前来说我们并不关心真实的物理对象,而只想看一下三个随机的点放在三个随机的位置,赋予三个随机的速度,那么这三个点会怎么走。所以其初始化过程为 import numpy as np m,x,y,u,v [np.random.rand(3) f…

【java入门系列四】java基础-数组

学习记录🤔数组引出动态初始化数组内的数据会自动转换类型注意事项数组赋值机制数组拷贝数组扩容append?多维数组trick生成随机数Math.random()讨论总结谢谢点赞交流!(❁◡❁)更多代码: Gitee主页:https://gitee.com/G…

如何进行复盘

复盘定义 复盘,原本是围棋术语,指下完一盘棋后,双方棋手把对弈过程重新摆一遍,看哪里下得好,哪里下得不好,哪些关键节点有不同甚至更好的下法,以检查对局中招法的优劣与得失,并从中…