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）后࿰…...
MacBook Pro用户必看：5分钟搞定StarUML破解（M1/M2芯片专用指南）
M1/M2芯片MacBook高效配置StarUML全流程指南 当你在M1/M2芯片的MacBook上第一次打开StarUML时，可能会遇到各种兼容性问题。作为一款强大的UML建模工具，StarUML在ARM架构下的表现确实有些水土不服。但别担心，经过多次实践，我总结出…...
智能化运维实战：信息化系统自动化巡检与故障自愈方案
1. 为什么需要自动化巡检与故障自愈？ 想象一下，你负责维护一个大型电商平台的后台系统。凌晨3点突然收到告警短信：数据库CPU使用率飙升到98%。这时候你需要立刻起床，手忙脚乱地登录服务器检查日志、分析原因、尝试重启服务...这样…...
当BFD不可用时：用华为NQA+静态路由实现低成本链路监测（含ICMP测试例详解）
华为NQA静态路由：低成本链路监测的实战指南 在传统企业网络中，静态路由因其配置简单、资源消耗低的特点，常被用于小型网络或边缘设备互联。但静态路由最大的痛点在于缺乏自动检测机制——当链路出现故障时，管理员往往要等到用户投…...
Python实战：高效破解RAR加密文件的自动化脚本设计
1. 为什么需要RAR密码破解脚本 在日常工作中，我们经常会遇到这样的尴尬情况：一个重要的RAR压缩文件，明明是自己设置的密码，却怎么也想不起来了。这时候，一个能够自动尝试各种密码组合的Python脚本就能派上大用场。 RAR…...
从零到一：基于LLaMA-Factory与Ollama的本地大模型定制化实战
1. 为什么需要本地定制化大模型？ 最近两年，大语言模型的发展速度简直让人瞠目结舌。从最初的GPT-3到现在的Llama 3，模型能力越来越强，但随之而来的问题是：这些通用大模型真的能满足我们每个人的特定需求吗？…...
如何解决OpenCode在开发大型项目时的“特性丢失”与“特性退化”问题？
你遇到的情况在大型项目中使用 AI 编程助手时非常典型。随着项目规模扩大，AI 生成的代码容易出现“特性退化”和“特性丢失”，核心原因在于上下文窗口有限、模型对项目全局理解不足、以及缺乏稳定的开发规范约束。针对 OpenCode 这类 AI 编程助手&#x…...
3步告别音乐APP的广告轰炸，这款开源工具让你回归纯粹聆听
3步告别音乐APP的广告轰炸，这款开源工具让你回归纯粹聆听 【免费下载链接】tonzhon-music 铜钟 (Tonzhon.com): 免费听歌; 没有直播, 社交, 广告, 干扰; 简洁纯粹, 资源丰富, 体验独特！(密码重置功能已回归) 项目地址: https://gitcode.com/GitHub_Tre…...
从电动车痛点出发：双三相永磁电机如何靠‘弱磁’跑得更远更快？（深入对比凸极与隐极设计）
双三相永磁电机弱磁控制技术：破解电动车高速性能瓶颈的工程实践 电动车的高速巡航与急加速能力一直是用户关注的焦点，而永磁同步电机（PMSM）的弱磁控制技术正是解锁这一性能的关键。不同于传统三相电机，双三相永磁同步…...
Unity LineRenderer不只是画线：5个实战案例教你做激光、轨迹与魔法特效
Unity LineRenderer实战进阶：从激光瞄准到魔法光束的5种创意实现 在Unity游戏开发中，LineRenderer常被简单地视为"画线工具"，但它的潜力远不止于此。当我们将这个组件与物理系统、着色器技术和游戏逻辑相结合时，它能创造…...
基于麻雀优化算法（SSA）优化shared TCN-Transformer模型超参数，实现时间...
基于麻雀优化算法（SSA）优化shared TCN-Transformer模型超参数，实现时间序列预测。[1]模型采用共享TCN结构，用于提取Encoder Embedding和Decoder Embedding 的因果特征，在尽可能保证模型复杂度不变的情况下，…...