项目实战：Vue3开发一个购物车
这段HTML代码实现了一个简单的购物车实战小项目的前端页面，结合了Vue.js框架来实现数据响应式和交互逻辑。页面展示了购物车中的商品项，每个商品项有增减数量的按钮，并且能显示商品总数以及目前固定为0元的商品总价和总价计算。 【运用响应式数据内容】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实战小项目:购物车</title><style>body {font-family: Arial, sans-serif;}.cart-item {width: 50%;margin-bottom: 15px;padding: 10px;border: 2px solid gray;border-radius: 10px;background-color: #ddd;}.buttons {margin-top: 5px;}.buttons button {padding: 5px 10px;margin-right: 5px;font-size: 16px;cursor: pointer;border: none;border-radius: 3px;background-color: pink;}.buttons input {width: 25px;}.buttons button:hover {background-color: yellow;}.quantity {font-size: 18px;font-weight: bold;margin-left: 10px;}h1, h2 {color: #333;}</style>
</head>
<body><div id="app"><h1>实战小项目:购物车</h1><!-- 提示：可以使用v-for指令，假设有n个品类，则生成n个商品项--><div class="cart-item" v-for="(item, index) in cartItems"><div class="buttons"><span>{{item.name}} </span><button v-on:click = "decreaseQuantity(index)">-</button><span class="quantity">{{ cartItems[index].quantity }} </span><button v-on:click = "increaseQuantity(index)">+</button><p>请输入价格：<input type="text" v-model="cartItems[index].unit_price"/> 元/斤 <br> 单价：{{cartItems[index].unit_price}} 元/斤</p></div></div><!-- 提示：可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价--><h3>商品总数: <ins> {{totalItems}} </ins> 件</h3><h3>商品总价: <ins> {{sum}}</ins> 元</h3></div><script type="module">import { createApp, reactive, computed } from './vue.esm-browser.js'createApp({setup() {// 1.定义属性：存储商品的（响应式）数组 const cartItems = reactive([{ name: '苹果', quantity: 0, unit_price: "" },{ name: '香蕉', quantity: 0, unit_price: "" },{ name: '菠萝', quantity: 0, unit_price: "" },// 可以自适应添加更多商品 // { name: '芒果', quantity: 0, unit_price: "" },// { name: '鸭梨', quantity: 0, unit_price: "" },]);// 2.定义方法：增加商品数// increaseQuantity方法：以一个商品在cartItems数组中的索引为参数const increaseQuantity = (index) => {// 点击"+"时，商品数量+1cartItems[index].quantity += 1; }// 3.定义方法：减少商品数const decreaseQuantity = (index) => {// 商品数量没有负值，因此多加一道判断// 商品数量小于0时，不会-1if(cartItems[index].quantity > 0){// 点击"-"时，商品数量-1cartItems[index].quantity -= 1;}}// 4.定义方法：计算商品总数// totalItems计算属性const totalItems = computed(() => {let total_items = 0;// 遍历cartItems数组，计算每个商品的数量for(const item of cartItems){// 累加在一起total_items += item.quantity;}return total_items})// 5.定义方法：计算商品总价const sum = computed(() =>{let total_sum=0;for(const item of cartItems){// 商品总价=商品数量*商品单价total_sum+=item.quantity*item.unit_price;}return total_sum})// 6.暴露属性和方法return {cartItems, increaseQuantity,decreaseQuantity,totalItems,sum};},}).mount('#app');</script>
</body>
</html>相关文章：
项目实战：Vue3开发一个购物车
这段HTML代码实现了一个简单的购物车实战小项目的前端页面，结合了Vue.js框架来实现数据响应式和交互逻辑。页面展示了购物车中的商品项，每个商品项有增减数量的按钮，并且能显示商品总数以及目前固定为0元的商品总价和总价计算。 【运用响应式…...
Oracle SQL*Plus中的SET VERIFY
在 Oracle SQL*Plus 中，SET VERIFY ON 和 SET VERIFY OFF 是两个用于控制命令执行前后显示变量值的命令。这些命令主要用于调试和验证 SQL 脚本中的变量替换情况。 一、参数说明 1.1 SET VERIFY ON 作用：启用变量替换的验证功能。当启用时，S…...
Spring AI 框架使用的核心概念
一、模型（Model） AI 模型是旨在处理和生成信息的算法，通常模仿人类的认知功能。通过从大型数据集中学习模式和见解，这些模型可以做出预测、文本、图像或其他输出，从而增强各个行业的各种应用。 AI 模型有很多种&…...
二叉树路径相关算法题|带权路径长度WPL|最长路径长度|直径长度|到叶节点路径|深度|到某节点的路径非递归(C)
带权路径长度WPL 二叉树的带权路径长度(WPL)是二叉树所有叶节点的带权路径长度之和，给定一棵二叉树T，采用二叉链表存储，节点结构为 其中叶节点的weight域保存该节点的非负权值，设root为指向T的根节点的指针，设计求W…...
前端：JavaScript （学习笔记）【2】
目录 一，数组的使用 1，数组的创建 [ ] 2，数组的元素和长度 3，数组的遍历方式 4，数组的常用方法 二，JavaScript中的对象 1，常用对象 （1）String和java中的Stri…...
[面试]-golang基础面试题总结
文章目录 panic 和 recover**注意事项**使用 pprof、trace 和 race 进行性能调试。**Go Module**：Go中new和make的区别 Channel什么是 Channel 的方向性？如何对 Channel 进行方向限制？Channel 的缓冲区大小对于 Channel 和 Goroutine 的通信有…...
【案例】泛微.齐业成助力北京中远大昌汽车实现数电票全流程管理
中远大昌统一发票共享平台上线三个多月以来，实现： 5000份 60000元 发票开具 成本节约 客户简介及需求分析 北京中远大昌汽车服务有限公司（以下简称“中远大昌”）成立于2002年，是中远海运集团所属香远（北…...
微软安全文章合集
说明：文章来自微软很多年前旧帖，有用的部分拿去，没用的就忽略吧，另外提一句，微软会清理文章，很多我收藏的帖子都无法查看了，所以收藏的最好办法是，用word复制粘贴下来保存到云盘&…...
自然语言处理: RAG优化之Embedding模型选型重要依据：mteb/leaderboard榜
本人项目地址大全：Victor94-king/NLP__ManVictor: CSDN of ManVictor git地址：https://github.com/opendatalab/MinerU 写在前面: 笔者更新不易，希望走过路过点个关注和赞，笔芯!!! 写在前面: 笔者更新不易，希望走过路…...
鸿蒙主流路由详解
鸿蒙主流路由详解 Navigation Navigation更适合于一次开发,多端部署,也是官方主流推荐的一种路由控制方式,但是,使用起来入侵耦合度高,所以,一般会使用HMRouter,这也是官方主流推荐的路由 Navigation官网地址 个人源码地址 路由跳转 第一步-定义路由栈 Provide(PageInfo) pag…...
C#构建一个简单的循环神经网络，模拟对话
循环神经网络（Recurrent Neural Network, RNN）是一种用于处理序列数据的神经网络模型。与传统的前馈神经网络不同，RNN具有内部记忆能力，可以捕捉到序列中元素之间的依赖关系。这种特性使得RNN在自然语言处理、语音识别、时间序列预…...
Linux上安装单机版Kibana6.8.1
1. 下载安装包 kibana-6.8.1-linux-x86_64.tar.gz 链接：https://pan.baidu.com/s/1b4kION9wFXIVHuWDn2J-Aw 提取码：rdrc 2. Kibana启动不能使用root用户，使用ES里创建的elsearch用户，进行赋权： chown -R elsearch:els…...
短视频矩阵矩阵，矩阵号策略
随着数字媒体的迅猛发展，短视频平台已经成为企业和个人品牌推广的核心渠道。在这一背景下，短视频矩阵营销策略应运而生，它通过高效整合和管理多个短视频账号，实现资源的最优配置和营销效果的最大化。本文旨在深入探讨短视频矩阵的…...
Rust 力扣 - 2266. 统计打字方案数
文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 这题可以先求按了多少次相同连续的按钮，所有的连续相同按钮表示的方案数的乘积就是本题答案 我们的关键问题就转换成了按n个连续相同按钮表示的方案数 设f(i)表示按i个连续相同按钮表示的方案数 如…...
【大数据技术与开发实训】携程景点在线评论分析
景点在线评论分析 题目要求实验目标技术实现数据采集获取所有相关景点页面的 URL获取所有相关景点对应的 poiId 及其他有用信息通过 poiId 获取所有景点的全部评论数据采集结果 数据预处理景点信息的数据预处理查看数据基本信息缺失值处理 用户评论的数据处理缺失值处理分词、去…...
46.坑王驾到第十期：vscode 无法使用 tsc 命令
点赞收藏加关注，你也能住大别墅！ 一、问题重现 上一篇帖子记录了我昨天在mac上安装typescript及调试的过程。今天打开vscode准备开干的时候，发现tsc命令又无法使用了，然后按照昨天的方法重新安装调试后又能用了，但是关…...
postman 调用 下载接口（download）使用默认名称（response.txt 或随机名称）
官网地址：https://www.postman.com 介绍 Postman 是一款流行的 API 开发和测试工具，用于发送 HTTP 请求、测试接口、调试服务器响应以及进行 API 文档管理。它支持多种请求类型（如 GET、POST、PUT、DELETE 等），并且功能…...
单片机_简单AI模型训练与部署__从0到0.9
IDE： CLion MCU： STM32F407VET6 一、导向 以求知为导向，从问题到寻求问题解决的方法，以兴趣驱动学习。 虽从0，但不到1，剩下的那一小步将由你迈出。本篇主要目的是体验完整的一次简单AI模型部署流程&#x…...
对撞双指针（七）三数之和
15. 三数之和 给你一个整数数组 nums ，判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ，同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意：答案中不可以包含重复的三元组…...
【Ubuntu24.04】服务部署（虚拟机）
目录 0 背景1 安装虚拟机1.1 下载虚拟机软件1.2 安装虚拟机软件1.2 安装虚拟电脑 2 配置虚拟机2.1 配置虚拟机网络及运行初始化脚本2.2 配置服务运行环境2.2.1 安装并配置JDK172.2.2 安装并配置MySQL8.42.2.3 安装并配置Redis 3 部署服务4 总结 0 背景 你的服务部署在了你的计算…...
timm库加载的模型可视化
在深度学习中，模型的可视化有助于了解模型的结构和层级关系。以下是几种方式来可视化使用 timm 库加载的模型： 打印模型结构 torch.nn.Module 的子类（包括 timm 的模型）可以通过 print() 查看其结构：import timm# 加…...
服务限流、降级、熔断-SpringCloud
本文所使用的组件：Nacos（服务中心和注册中心）、OpenFeign（服务调用）、Sentinel（限流、降级）、Hystrix（熔断） 项目结构： service-provider：提供服…...
2024最新YT-DLP使用demo网页端渲染
2024最新YT-DLP使用demo网页端渲染 前提摘要1.使用python的fastapi库和jinjia2库进行前端渲染2.代码实现1）目录结构2）代码style.cssindex.htmlresult.htmlmain.pyrun.py 3）运行测试命令端运行 3.项目下载地址 前提摘要 2024最新python使用yt…...
《第十部分》1.STM32之通信接口《精讲》之IIC通信---介绍
经过近一周的USART学习，我深刻体会到通信对单片机的重要性。它就像人类的手脚和大脑，只有掌握了通信技术，单片机才能与外界交互，展现出丰富多彩的功能，变得更加强大和实用。 单片机最基础的“语言”是二进制。可惜&am…...
wireshark使用lua解析自定义协议
wireshark解析自定义协议 1.自定义的lua放入路径2.修改init.lua2.1 开启lua2.2 init.lua文件最后加入自己的lua文件位置，这里需要确保与自己的文件名相同 3.编写lua4.编写c抓包5.wireshark添加自定义协议如何加调试信息 1.自定义的lua放入路径 一般是自己软件的安装…...
(Keil)MDK-ARM各种优化选项详细说明、实际应用及拓展内容
参考 MDK-ARM各种优化选项详细说明、实际应用及拓展内容 本文围绕MDK-ARM优化选项，以及相关拓展知识（微库、实际应用、调试）进行讲述，希望对你今后开发项目有所帮助。 1 总述 我们所指的优化，主要两方面： 1.代码大小（Size） 2.代码性能（运行时间） 在MDK-ARM中，优…...
Qt实现可拖拽的矩形
之前项目上需要用Qt来绘制可拖拽改变形状的矩形。看了Qt Graphics相关的内容，虽然对Qt怎么添加图元的有了些了解，但是具体如何实现拖拽效果，一时也没有什么好的想法。还好网上有人分享的例子，很受启发。后来又回顾了一下这部分的代…...
CentOS：A服务器主动给B服务器推送（上传），B服务器下载A服务器文件（下载）
Linux：常识（bash: ip command not found ）_bash: ip: command not found-CSDN博客 rsync 中断后先判断程序是否自动重连：ps aux | grep rsync 查看目录/文件是否被使用（查询线程占用）：lsof /usr/local/bin/mongodump/.B_database1.6uRCTp 场景：MongoDB中集合非常大需要…...
Oracle 执行计划查看方法汇总及优劣对比
在 Oracle 数据库中，查看执行计划是优化 SQL 语句性能的重要工具。以下是几种常用的查看执行计划的方法及其优劣比较： 1. 使用 EXPLAIN PLAN FOR 和 DBMS_XPLAN.DISPLAY 方法 执行 EXPLAIN PLAN FOR 语句： EXPLAIN PLAN FOR SELECT * FROM …...
TCL大数据面试题及参考答案
Mysql 索引失效的场景 对索引列进行运算或使用函数：当在索引列上进行数学运算、函数操作等，索引可能失效。例如，在存储年龄的列上建立了索引，若查询语句是 “SELECT * FROM table WHERE age + 1 = 20”，这里对索引列 age 进行了加法运算，数据库会放弃使用索引而进行全表扫…...