14-案例:购物车
综合案例-购物车
需求说明:
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年2月月赛(丙组)
上海市青少年算法2023年2月月赛(丙组)T1 格式改写 题目描述 给定一个仅由拉丁字符组成字符序列,需要改写一些字符的大小写,使得序列全部变成大写或全部变成小写,请统计最少修改多少个字符才能完成这项任务。 输入格式 一个字符序列:保证仅由拉丁字符构成 输出格式 单个整…...
jetpack5.0.2 已经安装了 cudnn 和 tensorrt
在平台 jetson Xavier NX 中想使用 cudnn 和 tensorrt。然后自己下载了相应包并解压,拷贝,编译 安装 cudnn 1.下载对应包文件,例如:cudnn-linux-sbsa-8.4.1.50_cuda11.6-archive.tar.xz 2.解压,移动到解压目录&#…...
我的编程语言学习笔记
前言 作为一名编程初学者,我深知学习编程需要不断积累和记录。在这篇博客文章中,我将分享一些我在学习C/C编程语言过程中记录的常用代码、特定函数、复杂概念以及特定功能。希望能与大家一起切磋进步! 常用代码: 1. 输入输出操作…...
一个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 有图中所示一行信息,表示一个DW(…...
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) 修改启动端口 找一个没…...
JMM内存模型之happens-before阐述
文章目录 一、happens-before的定义二、happens-before的规则1. 程序顺序规则:2. 监视器锁规则:3. volatile变量规则:4. 传递性:5. start()规则:6. join()规则: 一、happens-before的定义 如果一个操作hap…...
大数据课程I2——Kafka的架构
文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 掌握Kafka的架构; ⚪ 掌握Kafka的Topic与Partition; 一、Kafka核心概念及操作 1. producer生产者,可以是一个测试线程,也可以是某种技术框架(比如flume)。 2. producer向kafka生…...
vscode如何汉化
首先我们到vscode官网下载 链接如下: Visual Studio Code - Code Editing. Redefined 根据自己需要的版本下载就好 下载并且安装完毕之后 运行vscode 然后按快捷键 CTRLSHIFTX 打开安装扩展界面 搜索简体中文 安装就可以了 谢谢大家观看...
matlab保存图片
仅作为记录,大佬请跳过。 文章目录 用界面中的“另存为”用saveas 用界面中的“另存为” 即可。 参考 感谢大佬博主文章:传送门 用saveas 必须在编辑器中的plot之后用saveas(也就是不能在命令行中单独使用——比如在编辑器中plot…...
产业园区数字孪生3d可视化全景展示方案
随着数字经济的发展,数字技术给企业发展带来了机遇的同时,也为企业管理带来挑战。比如园区运维,不仅体量大,复杂的运维管理系统,落地难度也较高。那么如何通过数字化手段重塑园区运营,打通园区各业务数据孤…...
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…...
【算法——双指针】LeetCode 202 快乐数
题目描述: 思路:快慢指针 看到循环,我就想起了快慢指针的方法,从题目我们可以看出,我们需要模拟一个过程:不断用当前的数去生成下一个数,生成的规则就是将当前数的各位的平方累加; …...
AndroidManifest清单文件中,Activity的screenOrientation属性详解
screenOrientation用于控制Acivity的屏幕方向,参数有16个。 参数值功能自动旋转打开自动旋转关闭unspecified-1让系统决定Activity的方向,由传感器和系统设置共同决定四个方向不旋转landscape0强制为横屏,忽略传感器和系统设置不旋转不旋转portrait1强制为竖屏,忽略传感器和系统…...
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.总结 前言 …...
TCP/IP 下的计算机网络江湖
〇、引言 在当今数字化时代,计算机网络宛如广袤江湖,涵盖着五大门派:物理层、数据链路层、网络层、传输层和应用层。每个门派独具技能,共同构筑着现代网络的框架。物理层宛如江湖基石,将比特流传输;数据链路层如武林传承,组织数据帧传递;网络层则像导航大师,寻找传送路…...
智能家居(4)---火灾报警线程封装
封装火灾报警线程实现智能家居中的火灾报警功能 mainPro.c(主函数) #include <stdio.h> #include "controlDevice.h" #include "inputCommand.h"#include <pthread.h>struct Devices *pdeviceHead NULL; …...
C#语音播报问题之 无法嵌入互操作类型SpVoiceClass,请改用适用的窗口
C#语音播报问题之 无法嵌入互操作类型SpVoiceClass,请改用适用的窗口 解决办法如下: 只需要将引入的Interop.SpeechLib的属性嵌入互操作类型改为false 改为false 即可解决!...
C语言实例_获取文件MD5值
一、MD5介绍 MD5(Message Digest Algorithm 5)是一种常用的哈希函数算法。将任意长度的数据作为输入,并生成一个唯一的、固定长度(通常是128位)的哈希值,称为MD5值。MD5算法以其高度可靠性和广泛应用而闻名…...
Win11环境下 Unity个人版无法激活
网上教程大多都是在win10环境下运行,win11环境下遇到很多没有碰到的问题,故简单做个记录,也方便同样使用win11的朋友解决问题。 Unity2021无法打开 问题描述:下载Unity2021.3.4f1c1版本(LTS)后࿰…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...
【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅
目录 前言 操作系统与驱动程序 是什么,为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中,我们在使用电子设备时,我们所输入执行的每一条指令最终大多都会作用到硬件上,比如下载一款软件最终会下载到硬盘上&am…...
xmind转换为markdown
文章目录 解锁思维导图新姿势:将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件(ZIP处理)2.解析JSON数据结构3:递归转换树形结构4:Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...
QT开发技术【ffmpeg + QAudioOutput】音乐播放器
一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下,音视频内容犹如璀璨繁星,点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频,到在线课堂中知识渊博的专家授课,再到影视平台上扣人心弦的高清大片,音…...
《信号与系统》第 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 …...
前端调试HTTP状态码
1xx(信息类状态码) 这类状态码表示临时响应,需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分,客户端应继续发送剩余部分。 2xx(成功类状态码) 表示请求已成功被服务器接收、理解并处…...
