当前位置： 首页 > news >正文

14-案例:购物车

news 2025/12/25 22:48:46

 综合案例-购物车

需求说明:

        1. 渲染功能

                v-if/v-else v-for :class

        2. 删除功能

                点击传参 filter过滤覆盖原数组

        3. 修改个数

                点击传参 find找对象

        4. 全选反选

                计算属性computed 完整写法 get/set

        5. 统计 选中的 总价 和 数量

                计算属性conputed reduce条件求和

        6. 持久化到本地 

                watch监听,localStorage, JSON.stringfiy, JSON.parse

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.active {background-color: azure;}</style></head><body><div id="app"><!-- 顶部banner --><div><img></div><!-- 面包屑 --><div></div><!-- 购物车主体 --><div v-if="fruitList.length > 0"><div><!-- 头部 --><div><div></div></div><!-- 身体 --><div><div v-for="(item,index) in fruitList" :key="item.id" :class="{active:item.isChecked}"><div><input type="checkbox" v-model="item.isChecked"></div><div><img width="100px" height="50px" :src="item.icon"></div><div>{{item.price}}</div><div><div><!-- :disabled: 禁用 --><button :disabled="item.num<=1" @click="sub(item.id)">-</button><span>{{item.num}}</span><button @click="add(item.id)">+</button></div></div><div>{{ item.num * item.price }}</div><div><button @click="del(item.id)">删除</button></div></div></div></div><!-- 底部 --><div><!-- 全选 --><label><input type="checkbox" v-model="isAll">全选</label><div><!-- 所有商品总价 --><span>总价:{{totalPrice}} </span><!-- 结算按钮 --><button>结算({{totalCount}})</button></div></div></div><!-- 空车 --><div v-else>空空如也</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>// 购物车的默认值const defaultArr = [{id: 1,icon: 'http://autumnfish.cn/static/火龙果.png',isChecked: true,num: 2,price: 6}, {id: 2,icon: 'http://autumnfish.cn/static/荔枝.png',isChecked: false,num: 7,price: 20}, {id: 3,icon: 'http://autumnfish.cn/static/榴莲.png',isChecked: true,num: 10,price: 50},]const app = new Vue({el: '#app',data: {// 水果列表,从本地缓存读取,|| []: 初始值,一般都是空数组fruitList:  JSON.parse(localStorage.getItem("list")) || defaultArr,},computed: {// 默认计算属性:只能获取不能设置,要设置需要写完整的写法// isAll(){//     // 必须所有的小选框都选中,全选按钮才选中 -> every//     return  this.fruitList.every(item => item.isChecked === true)// }// 完整写法 = get + setisAll:{get(){return  this.fruitList.every(item => item.isChecked === true)},set(value){// 基于拿到的布尔值,要让所有的小选框,同步状态this.fruitList.forEach(item => item.isChecked = value)}},// 统计选中的总数 reducetotalCount(){return this.fruitList.reduce((sum,item) => {if (item.isChecked){// 选中 -> 需要累加return sum + item.num}else{// 没选中 -> 不需要累加return sum}},0)},// 统计选中的总价 num * pricetotalPrice(){return this.fruitList.reduce((sum,item) => {if (item.isChecked){return sum + item.num * item.price}else{return sum}},0)}},methods: {del(id) {this.fruitList = this.fruitList.filter(item => item.id != id)},sub(id) {// 1. 根据ID找到数组中的对应项 -> findconst fruit = this.fruitList.find(item => item.id === id)//2. 操作 num 数量fruit.num--},add(id) {// 1. 根据ID找到数组中的对应项 -> findconst fruit = this.fruitList.find(item => item.id === id)//2. 操作 num 数量fruit.num++}},// 缓存到本地watch:{fruitList:{deep: true,handler(newValue){// 需要将变化后的 newValue 存入本地 (转json)localStorage.setItem("list",JSON.stringify(newValue))}}}})</script></body></html>

相关文章：

14-案例:购物车

综合案例-购物车 需求说明: 1. 渲染功能 v-if/v-else v-for :class 2. 删除功能 点击传参 filter过滤覆盖原数组 3. 修改个数 点击传参 find找对象 4. 全选反选 计算属性computed 完整写法 get/set 5. 统计 选中的 总价 和 数量 计算属性conputed reduce条件求和 6. 持久化到本…...

编程日记 2023/8/18 13:08:02

上海市青少年算法2023年2月月赛（丙组）

上海市青少年算法2023年2月月赛（丙组）T1 格式改写 题目描述 给定一个仅由拉丁字符组成字符序列，需要改写一些字符的大小写，使得序列全部变成大写或全部变成小写，请统计最少修改多少个字符才能完成这项任务。 输入格式 一个字符序列：保证仅由拉丁字符构成 输出格式 单个整…...

编程日记 2023/8/18 13:07:00

jetpack5.0.2 已经安装了 cudnn 和 tensorrt

在平台 jetson Xavier NX 中想使用 cudnn 和 tensorrt。然后自己下载了相应包并解压&#xff0c;拷贝&#xff0c;编译 安装 cudnn 1.下载对应包文件&#xff0c;例如&#xff1a;cudnn-linux-sbsa-8.4.1.50_cuda11.6-archive.tar.xz 2.解压&#xff0c;移动到解压目录&#…...

编程日记 2023/8/18 13:05:59

我的编程语言学习笔记

前言 作为一名编程初学者&#xff0c;我深知学习编程需要不断积累和记录。在这篇博客文章中&#xff0c;我将分享一些我在学习C/C编程语言过程中记录的常用代码、特定函数、复杂概念以及特定功能。希望能与大家一起切磋进步&#xff01; 常用代码&#xff1a; 1. 输入输出操作…...

编程日记 2023/8/18 13:04:58

一个DW的计算

一个DW的计算 1- 题目: 已知一个DW1.1 要求: 从DW中取出指定的位的值1.1.1 分析1.1.2 实现1.1.3 简化实现1.1.4 验证 2- 题目: 已知一个DW2.1 要求: 从DW中的指定的P和S,取出指定的位的值2.1.1 分析2.1.2 实现 1- 题目: 已知一个DW 有图中所示一行信息&#xff0c;表示一个DW(…...

编程日记 2023/8/18 13:03:56

java.net.BindException Address already in use: NET_Bind解决

java.net.BindException Address already in use: NET_Bind 两种解决方法 两种解决方法 (1) kill 占用此端口的线程 查看报错的端口 netstat -ano | findstr 16825tasklist | findstr 1092 如果占用的程序不重要直接kill taskkill /f /pid 16825 (2) 修改启动端口 找一个没…...

编程日记 2023/8/18 13:02:55

JMM内存模型之happens-before阐述

文章目录 一、happens-before的定义二、happens-before的规则1. 程序顺序规则&#xff1a;2. 监视器锁规则&#xff1a;3. volatile变量规则&#xff1a;4. 传递性&#xff1a;5. start()规则&#xff1a;6. join()规则&#xff1a; 一、happens-before的定义 如果一个操作hap…...

编程日记 2023/8/18 13:01:54

大数据课程I2——Kafka的架构

文章作者邮箱：yugongshiye@sina.cn 地址：广东惠州 ▲ 本章节目的 ⚪ 掌握Kafka的架构； ⚪ 掌握Kafka的Topic与Partition； 一、Kafka核心概念及操作 1. producer生产者，可以是一个测试线程，也可以是某种技术框架（比如flume）。 2. producer向kafka生…...

编程日记 2023/8/18 13:00:53

vscode如何汉化

首先我们到vscode官网下载 链接如下&#xff1a; Visual Studio Code - Code Editing. Redefined 根据自己需要的版本下载就好 下载并且安装完毕之后 运行vscode 然后按快捷键 CTRLSHIFTX 打开安装扩展界面 搜索简体中文 安装就可以了 谢谢大家观看...

编程日记 2023/8/18 12:59:52

matlab保存图片

仅作为记录&#xff0c;大佬请跳过。 文章目录 用界面中的“另存为”用saveas 用界面中的“另存为” 即可。 参考 感谢大佬博主文章&#xff1a;传送门 用saveas 必须在编辑器中的plot之后用saveas&#xff08;也就是不能在命令行中单独使用——比如在编辑器中plot&#xf…...

编程日记 2023/8/18 12:58:50

产业园区数字孪生3d可视化全景展示方案

随着数字经济的发展&#xff0c;数字技术给企业发展带来了机遇的同时&#xff0c;也为企业管理带来挑战。比如园区运维&#xff0c;不仅体量大&#xff0c;复杂的运维管理系统&#xff0c;落地难度也较高。那么如何通过数字化手段重塑园区运营&#xff0c;打通园区各业务数据孤…...

编程日记 2023/8/18 12:57:48

centos7 jupyter notebook 安装自动补全插件

激活juoyter notebook的安装环境 conda activate prod执行以下命令安装 pip install jupyter_contrib_nbextensions -i https://pypi.tuna.tsinghua.edu.cn/simple jupyter contrib nbextension install --userpip install jupyter_nbextensions_configurator -i https://py…...

编程日记 2023/8/18 12:56:47

【算法——双指针】LeetCode 202 快乐数

题目描述&#xff1a; 思路&#xff1a;快慢指针 看到循环&#xff0c;我就想起了快慢指针的方法&#xff0c;从题目我们可以看出&#xff0c;我们需要模拟一个过程&#xff1a;不断用当前的数去生成下一个数&#xff0c;生成的规则就是将当前数的各位的平方累加&#xff1b; …...

编程日记 2023/8/18 12:55:46

AndroidManifest清单文件中，Activity的screenOrientation属性详解

screenOrientation用于控制Acivity的屏幕方向,参数有16个。 参数值功能自动旋转打开自动旋转关闭unspecified-1让系统决定Activity的方向,由传感器和系统设置共同决定四个方向不旋转landscape0强制为横屏,忽略传感器和系统设置不旋转不旋转portrait1强制为竖屏,忽略传感器和系统…...

编程日记 2023/8/18 12:54:44

Qt+Pyhton实现麒麟V10系统下word文档读写功能

目录 前言1.C调用python1.1 安装Python开发环境1.2 修改Qt工程配置1.3 初始化Python环境1.4 C 调用Python 函数1.5 常用的Python接口 2.python虚拟环境2.1Python虚拟环境简介2.2 virtualenv 安装及使用2.3 在C程序中配置virtualenv 虚拟环境 3.python-docx库的应用4.总结 前言 …...

编程日记 2023/8/18 12:53:43

TCP/IP 下的计算机网络江湖

〇、引言 在当今数字化时代，计算机网络宛如广袤江湖，涵盖着五大门派：物理层、数据链路层、网络层、传输层和应用层。每个门派独具技能，共同构筑着现代网络的框架。物理层宛如江湖基石，将比特流传输；数据链路层如武林传承，组织数据帧传递；网络层则像导航大师，寻找传送路…...

编程日记 2023/8/18 12:52:42

智能家居(4)---火灾报警线程封装

封装火灾报警线程实现智能家居中的火灾报警功能 mainPro.c&#xff08;主函数&#xff09; #include <stdio.h> #include "controlDevice.h" #include "inputCommand.h"#include <pthread.h>struct Devices *pdeviceHead NULL; …...

编程日记 2023/8/18 12:51:40

C#语音播报问题之 无法嵌入互操作类型SpVoiceClass，请改用适用的窗口

C#语音播报问题之 无法嵌入互操作类型SpVoiceClass&#xff0c;请改用适用的窗口 解决办法如下&#xff1a; 只需要将引入的Interop.SpeechLib的属性嵌入互操作类型改为false 改为false 即可解决&#xff01;...

编程日记 2023/8/18 12:50:39

C语言实例_获取文件MD5值

一、MD5介绍 MD5&#xff08;Message Digest Algorithm 5&#xff09;是一种常用的哈希函数算法。将任意长度的数据作为输入&#xff0c;并生成一个唯一的、固定长度&#xff08;通常是128位&#xff09;的哈希值&#xff0c;称为MD5值。MD5算法以其高度可靠性和广泛应用而闻名…...

编程日记 2023/8/18 12:49:35

Win11环境下 Unity个人版无法激活

网上教程大多都是在win10环境下运行&#xff0c;win11环境下遇到很多没有碰到的问题&#xff0c;故简单做个记录&#xff0c;也方便同样使用win11的朋友解决问题。 Unity2021无法打开 问题描述&#xff1a;下载Unity2021.3.4f1c1版本&#xff08;LTS&#xff09;后&#xff0…...

编程日记 2023/8/18 12:48:31

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/11/28 2:51:33

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/12/1 19:23:04

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/12/13 22:42:30

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/12/10 23:18:38

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...

编程新知 2025/12/4 15:47:17

【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

编程新知 2025/12/24 23:02:55

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...

编程新知 2025/12/15 17:19:38

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

编程新知 2025/12/25 1:14:31

《信号与系统》第 6 章 信号与系统的时域和频域特性

目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...

编程新知 2025/12/25 3:02:57

前端调试HTTP状态码

1xx&#xff08;信息类状态码&#xff09; 这类状态码表示临时响应&#xff0c;需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分&#xff0c;客户端应继续发送剩余部分。 2xx&#xff08;成功类状态码&#xff09; 表示请求已成功被服务器接收、理解并处…...

编程新知 2025/9/23 9:23:07