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

14-案例:购物车

news 2025/12/25 21:13:05

 综合案例-购物车

需求说明:

        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

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2025/12/25 20:16:58

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/12/6 22:50:48

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

编程新知 2025/12/24 12:44:09

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2025/12/19 21:46:02

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

编程新知 2025/11/3 20:21:04

02.运算符

目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&&#xff1a;逻辑与 ||&#xff1a;逻辑或 &#xff01;&#xff1a;逻辑非 短路求值 位运算符 按位与&&#xff1a; 按位或 | 按位取反~ …...

编程新知 2025/12/25 6:56:40

Python环境安装与虚拟环境配置详解

本文档旨在为Python开发者提供一站式的环境安装与虚拟环境配置指南&#xff0c;适用于Windows、macOS和Linux系统。无论你是初学者还是有经验的开发者&#xff0c;都能在此找到适合自己的环境搭建方法和常见问题的解决方案。 快速开始 一分钟快速安装与虚拟环境配置 # macOS/…...

编程新知 2025/12/25 12:41:52

python打卡第47天

昨天代码中注意力热图的部分顺移至今天 知识点回顾&#xff1a; 热力图 作业&#xff1a;对比不同卷积层热图可视化的结果 def visualize_attention_map(model, test_loader, device, class_names, num_samples3):"""可视化模型的注意力热力图&#xff0c;展示模…...

编程新知 2025/12/11 8:10:41