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）后࿰…...
UE5 学习系列（二）用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作，重…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1） にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために ＆ ように（３）そう（４）にする3、…...
3.3.1_1 检错编码（奇偶校验码）
从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...
SpringCloudGateway 自定义局部过滤器
场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计，提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合：各模块职责清晰，便于独立开发…...
ip子接口配置及删除
配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由：大部分的转换软件需要收费，要么功能不齐全，而开会员又用不了几次浪费钱，借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...