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

14-案例:购物车

news 2026/3/29 9:04:47

 综合案例-购物车

需求说明:

        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

YOLOv13开箱即用镜像体验：简单几步，完成你的第一个AI检测项目

YOLOv13开箱即用镜像体验&#xff1a;简单几步&#xff0c;完成你的第一个AI检测项目 1. 为什么选择YOLOv13官版镜像&#xff1f; 1.1 传统部署的痛点 在目标检测领域&#xff0c;YOLO系列一直是开发者的首选。但传统部署方式往往让人望而却步&#xff1a; 环境配置复杂&am…...

编程新知 2026/3/29 8:49:54

突破音频加密壁垒：qmc-decoder的技术创新与应用价值

突破音频加密壁垒&#xff1a;qmc-decoder的技术创新与应用价值 【免费下载链接】qmc-decoder Fastest & best convert qmc 2 mp3 | flac tools 项目地址: https://gitcode.com/gh_mirrors/qm/qmc-decoder 技术痛点分析&#xff1a;加密音频格式的行业困境 为什么主…...

编程新知 2026/3/29 8:09:40

安装即实战，用快马平台生成集成openclaw的数据采集与分析示例项目

最近在做一个数据采集相关的项目&#xff0c;需要用到openclaw这个工具。说实话&#xff0c;刚开始安装和集成的时候踩了不少坑&#xff0c;后来发现InsCode(快马)平台可以一键生成完整的实战项目&#xff0c;简直不要太方便。今天就把我的经验分享给大家&#xff0c;希望能帮到…...

编程新知 2026/3/29 5:54:13

高效命令行的OpenClaw搭配：nanobot镜像与zsh/fish集成

高效命令行的OpenClaw搭配&#xff1a;nanobot镜像与zsh/fish集成 1. 为什么需要命令行AI助手 作为一个长期与终端打交道的开发者&#xff0c;我发现自己每天要重复处理三类高频问题&#xff1a;记不清的命令参数、复杂的管道组合、报错信息的即时解读。传统解决方案要么依赖…...

编程新知 2026/3/29 5:03:46

Mastering nohup: Redirecting Output for Persistent Server Deployments

1. 为什么你需要掌握nohup命令 想象一下这个场景&#xff1a;你在远程服务器上启动了一个重要的Java服务&#xff0c;花了半小时调试终于跑起来了。这时候老板喊你开会&#xff0c;你顺手关闭了终端窗口。等会议结束回来一看——服务居然挂了&#xff01;所有努力付诸东流&…...

编程新知 2026/3/29 4:31:13

告别手动输入！SQLPlus非交互模式执行SQL脚本的3种高效方法（附实例）

告别手动输入&#xff01;SQLPlus非交互模式执行SQL脚本的3种高效方法&#xff08;附实例&#xff09; 在数据库管理和开发工作中&#xff0c;频繁执行SQL脚本是家常便饭。想象一下这样的场景&#xff1a;每天凌晨需要生成报表、定期执行数据清洗任务、或者批量更新生产环境数据…...

编程新知 2026/3/29 1:23:23

别再只画流程图了！用AntV G6-Editor在Angular里搭建一个可交互的作业调度系统

用AntV G6-Editor在Angular中构建企业级作业调度可视化平台 当我们需要在Angular项目中实现复杂的作业调度系统时&#xff0c;传统的流程图工具往往难以满足业务需求。AntV G6-Editor作为专业级可视化编辑框架&#xff0c;提供了从基础绘图到深度定制的完整解决方案。本文将带你…...

编程新知 2026/3/29 1:09:18

ollama-QwQ-32B微调实践：优化OpenClaw的鼠标操作准确率

ollama-QwQ-32B微调实践&#xff1a;优化OpenClaw的鼠标操作准确率 1. 为什么需要微调模型&#xff1f; 去年冬天&#xff0c;当我第一次用OpenClaw自动整理桌面文件时&#xff0c;眼睁睁看着它把"季度报表.xlsx"拖进了"娱乐"文件夹——这个哭笑不得的瞬…...

编程新知 2026/3/29 0:39:11

手把手教你用Ollama玩转translategemma-27b-it：图文翻译全攻略

手把手教你用Ollama玩转translategemma-27b-it&#xff1a;图文翻译全攻略 1. 认识translategemma-27b-it&#xff1a;你的专业翻译助手 1.1 什么是translategemma-27b-it translategemma-27b-it是Google基于Gemma 3架构开发的开源翻译模型&#xff0c;专为多语言图文翻译任…...

编程新知 2026/3/29 0:21:06

告别乱码！用CMD批量转换文本换行符时如何保持GBK/UTF-8编码（附错误排查指南）

告别乱码&#xff01;用CMD批量转换文本换行符时如何保持GBK/UTF-8编码&#xff08;附错误排查指南&#xff09; 当你在Windows环境下处理来自不同操作系统的文本文件时&#xff0c;最令人头疼的问题莫过于换行符差异导致的格式混乱和编码转换引发的乱码。特别是对于数据分析师…...

编程新知 2026/3/28 23:50:57