vue--制作购物车
🤔如何制作出下列效果呢？👇
😶🌫️首先:
设置css样式：
<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: 15px;}.buttons button:hover {background-color: yellow;}.quantity {font-size: 18px;font-weight: bold;margin-left: 10px;}h1, h2 {color: #333;}</style>
</head>
<body>🤓接下来：
1、可以使用v-for指令，假设有n个品类，则生成n个商品项
2、使用下标指令遍历商品的名字和遍历商品的价格
3、v-on事件绑定设置+、- 数量
<!-- 提示：可以使用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" /> 元/斤 <br> 单价：1 元/斤</p></div></div><!-- 提示：可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价--><h3>商品总数: <ins> {{totalItems}} </ins> 件</h3><h3>商品总价: <ins> 1 </ins> 元</h3></div>2、🧐定义属性：
// 1.定义属性：存储商品的（响应式）数组 const cartItems = reactive([{ name: '苹果', quantity: 1, unit_price: 1 },{ name: '香蕉', quantity: 1, unit_price: 1 },{ name: '菠萝', quantity: 1, unit_price: 1 },3、🧐定义方法--增减数量
// 2.定义方法：增加商品数const increaseQuantity = (index) => {cartItems[index].quantity += 1; }// 3.定义方法：减少商品数const decreaseQuantity = (index) => {if(cartItems[index].quantity > 1){cartItems[index].quantity -= 1;}}4、🧐定义商品数量：
const totalItems = computed(() => {let total_items = 0;for(const item of cartItems){total_items += item.quantity;}return total_items})😲最后返回函数：
// 6.暴露属性和方法return {cartItems, increaseQuantity,decreaseQuantity,totalItems};},}).mount('#app');</script>完整代码：👇
<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: 15px;}.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" /> 元/斤 <br> 单价：1 元/斤</p></div></div><!-- 提示：可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价--><h3>商品总数: <ins> {{totalItems}} </ins> 件</h3><h3>商品总价: <ins> 1 </ins> 元</h3></div><script type="module">import { createApp, reactive, computed } from './vue.esm-browser.js'createApp({setup() {// 1.定义属性：存储商品的（响应式）数组 const cartItems = reactive([{ name: '苹果', quantity: 1, unit_price: 1 },{ name: '香蕉', quantity: 1, unit_price: 1 },{ name: '菠萝', quantity: 1, unit_price: 1 },]);// 2.定义方法：增加商品数const increaseQuantity = (index) => {cartItems[index].quantity += 1; }// 3.定义方法：减少商品数const decreaseQuantity = (index) => {if(cartItems[index].quantity > 1){cartItems[index].quantity -= 1;}}// 4.定义方法：计算商品总数const totalItems = computed(() => {let total_items = 0;for(const item of cartItems){total_items += item.quantity;}return total_items})// 5.定义方法：计算商品总价// 6.暴露属性和方法return {cartItems, increaseQuantity,decreaseQuantity,totalItems};},}).mount('#app');</script>
</body>
</html>相关文章：
vue--制作购物车
🤔如何制作出下列效果呢？👇 😶🌫️首先: 设置css样式： <style>body {font-family: Arial, sans-serif;}.cart-item {width: 50%;margin-bottom: 15px;padding: 10px;border: 2px solid gray;borde…...
深度测评腾讯云 HAI 智算服务：高性能 AI 计算的新标杆
本文 一、引言二、产品功能深度解析2.1 多样化的 GPU 配置选择2.2 预配置开发环境示例： 2.3 实时性能监控 三、核心技术特点与优势3.1 云端弹性扩展3.2 高性能计算架构 四、实际测试与代码案例4.1 NLP 案例：使用 BERT 进行情感分类数据集：IMD…...
MQ重复消费与消息顺序
如何避免消息重复消费 RocketMQ：给每个消息分配了一个MessageID。这个MessageID就可以作为消费者判断幂等的依据。这种方式不太建议，原因是在高并发场景下这个MessageID不保证全局唯一性。 最好由业务方创建一个与业务相关的全局唯一的ID来区分消息&am…...
应用商店双弹窗“APP在向用户申请权限时未同步告知用户申请此权限的理由”驳回uni-app应用上线的解决方法
目录 问题分析 解决方法 下载插件包：x-perm-apply-instr 将插件包导入进你项目中的uni_modules文件夹 在项目中的main.js文件中添加以下代码 完成 其它注意事项 addPermisionInterceptor 添加 uniApi 调用拦截 removePermisionInterceptor 移除 uniApi 调用…...
第 32 章 - Go语言 部署与运维
在Go语言的应用开发中，部署与运维是一个非常重要的环节。它不仅关系到应用能否顺利上线，还直接影响到应用的性能、安全性和可维护性。以下是根据您的需求整理的关于Go语言应用的打包和发布、容器化部署、监控和日志管理的相关内容。 1. 应用的打包和发布…...
噪杂环境离线语音通断器效果展示
介于之前的离线语音通断器模块的使用环境大部分为噪音比较小的环境中，部分客户对环境提出了更高的要求，能在噪杂、室外或者有一定的噪音的车内使用的模块开发需求被提高到了一个新的层次。最近找到某些能支持室外噪杂环境使用的芯片和模组，打…...
【django】扩展
1. Promise 1.1 对象和状态 是什么？是前端开发时js中的一个对象（包裹）。【对象】【异步请求】# 对象中有一个状态的值，status # 创建对象，不赋值，statuspendding let v1 new Promise(function(resolve, …...
逆向破解识别基础
找main函数： （使用OllyDbg软件） 方法一： 因为main函数需要三个参数，所以遇到三个参数加一个调用，那么可能是main函数。 方法二： 如果main函数中有字符串或者调用函数等一些唯一标识&#x…...
MFC 下拉框显示问题和控件自适应窗口大小
在mfc开发过程中，遇到了下拉框的两个问题，现在记录一下 1、把下拉框点开显示不全我放进去的多条文本 解决办法：把鼠标放到下拉框的倒三角去点一下，鼠标就会变成双向箭头，或者先选中一下下拉框再把鼠标移动到倒三角上去…...
Docker 的存储驱动及其优缺点
Docker 的存储驱动是容器文件系统的关键组成部分，决定了容器镜像和数据的存储方式。以下是常见的存储驱动及其优缺点： 1. OverlayFS/Overlay2 简介: Overlay 是现代 Linux 文件系统中一种高效的联合文件系统，Overlay2 是其改进版本࿰…...
单片机系统的性能指标有哪些？
单片机系统的性能指标涵盖了多个方面，这些指标共同决定了系统的整体性能。以下是单片机系统中常见的性能指标： 1. 处理器性能指标 1.1 时钟频率（Clock Frequency） 定义：处理器内核工作的时钟频率，通常以…...
波点音乐自动点击
波点音乐 import uiautomator2 as u2 import time import sys import os# 动态点击时间，打印剩余时间 def dynamic_sleep(seconds):wait_time secondsfor i in range(wait_time):print(f"Waiting... {wait_time - i} seconds remaining")sys.stdout.flu…...
HTTP 消息结构
HTTP 消息结构 1. 引言 超文本传输协议（HTTP）是互联网上应用最广泛的协议之一，它定义了客户端和服务器之间交换数据的格式和规则。HTTP消息是客户端和服务器之间通信的基本单位，包括请求消息和响应消息两种类型。本文将详细介绍HTTP消息的结构，包括其组成部分和格式。 …...
ESP32学习笔记_Bluetooth(1)——蓝牙技术与 BLE 通信机制简介
摘要(From AI): 这篇笔记详细讲解了蓝牙技术的分类、核心架构和通信流程，重点介绍了低功耗蓝牙（BLE）的协议栈、角色划分及连接机制，结合拓扑示例清晰阐述了蓝牙网络配置和操作过程 前言：本文档是本人在《ESP32-C3 物联…...
C0034.在Ubuntu中安装的Qt路径
Qt安装路径查询 在终端输入qmake -v如上中/usr/lib/x86_64-linux-gnu就是Qt的安装目录；...
jdbc学习——SQL注入
SQL注入介绍 SQL注入是通过操作输入来修改事先定义好的SQL语句，用以达到执行代码对服务器进行攻击的方法。 用户登录的本质：执行下面的sql语句 select * from tb_user where username zhangsan and password 123; 发生sql注入的本质 解决SQL注入的方…...
JavaEE-线程安全专题
文章目录 线程安全概述线程安全引入线程不安全原因概述 线程是随机调度的 线程安全概述 线程安全引入 线程安全问题是整个多线程专题的最核心也是最重要的章节, 如果不理解线程的安全, 是无法写出正确的多线程的代码的, 我们之前所写的代码都是在单一的线程环境之下写出的 “…...
Android 设备使用 Wireshark 工具进行网络抓包
背景 电脑和手机连接同一网络，想使用wireshark抓包工具抓取Android手机网络日志，有以下两种连接方法： Wi-Fi 网络抓包。USB 网络共享抓包。需要USB 数据线将手机连接到电脑，并在开发者模式中启用 USB 网络共享。 查看设备连接信…...
物联网无线局域网WiFi开发（一）：WiFi智能家居解决方案
一、WiFi智能家居硬件设计 （一）WiFi智能家居硬件方案 （二）硬件选型方案 二、WiFi开发环境搭建 （一）开发环境搭建 虚拟机lubuntu VirtualBox下载地址：https://www.virtualbox.org/wiki/Downl…...
GMAN解读（论文+代码）
一、注意力机制 注意力机制与传统的卷积神经网络不同的是，前者擅长捕获全局依赖和长程关系，权重会动态调整。而后者对于所有特征都使用同一个卷积核。关于更多注意力机制内容，详见： 注意力机制、自注意力机制、多头注意力机制、通…...
微信M4A文件打不开怎么办？m4a转MP3只需一招，小白也能操作
很多人会遇到这种情况：别人通过微信发来一段录音、会议音频、课程音频或者采访素材，文件后缀是.m4a，在微信里可能能播放，但保存到手机本地、发到电脑、导入剪辑软件或者复制到U盘后，就可能出现打不开、无法识别、格式不…...
工具调用失效？DeepSeek官方未公开的3个隐式约束条件，90%开发者至今仍在硬编码绕过
更多请点击： https://intelliparadigm.com 第一章：工具调用失效？DeepSeek官方未公开的3个隐式约束条件，90%开发者至今仍在硬编码绕过 DeepSeek-R1 模型虽开放了 tools 调用接口，但其底层推理引擎对工具参数存在三类未…...
2026破圈！5款一键生成论文工具亲测，打破思路枯竭，初稿半天搞定
对于学生、科研工作者而言，论文写作往往面临诸多挑战：文献资料繁杂难寻、格式排版反复调整、重复率居高不下、逻辑结构难以梳理，这些痛点严重制约了写作效率与研究成果的呈现质量。随着2026年AI技术的不断突破与优化，各类AI论文写…...
GetQzonehistory：如何通过开源工具实现QQ空间数据主权迁移？
GetQzonehistory：如何通过开源工具实现QQ空间数据主权迁移？ 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 在数字资产管理领域，数据主权已成为个人用…...
CleanMyWechat：你的微信磁盘空间救星，三步告别几十GB的缓存困扰
CleanMyWechat：你的微信磁盘空间救星，三步告别几十GB的缓存困扰 【免费下载链接】CleanMyWechat 自动删除 PC 端微信缓存数据，包括从所有聊天中自动下载的大量文件、视频、图片等数据内容，解放你的空间。 项目地址: https://git…...
ComfyUI-WanVideoWrapper终极指南：10分钟掌握AI视频生成技术
ComfyUI-WanVideoWrapper终极指南：10分钟掌握AI视频生成技术 【免费下载链接】ComfyUI-WanVideoWrapper 项目地址: https://gitcode.com/GitHub_Trending/co/ComfyUI-WanVideoWrapper AI视频生成技术正以前所未有的速度改变内容创作方式，而Comfy…...
如何让Axure RP显示中文：三分钟搞定界面本地化
如何让Axure RP显示中文：三分钟搞定界面本地化 【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包。支持 Axure 11、10、9。不定期更新。 项目地址: https://gitcode.com/gh_mirrors/ax/axure-cn 还在为Axure RP的英文…...
Python HTTPS请求SSL证书验证失败排查指南
1. 这不是requests的bug，是TLS握手失败在敲门你刚写完一行requests.get("https://api.example.com")，回车一按，终端却甩出一长串红色报错：HTTPSConnectionPool(hostapi.example.com, port443): Max retries exceeded wi…...
艾尔登法环存档救星：5分钟学会角色迁移，告别数百小时进度丢失
艾尔登法环存档救星：5分钟学会角色迁移，告别数百小时进度丢失 【免费下载链接】EldenRingSaveCopier 项目地址: https://gitcode.com/gh_mirrors/el/EldenRingSaveCopier 艾尔登法环存档管理器是你守护游戏进度的终极解决方案。想象一下…...
论文提速的终极秘籍！常用的AI论文软件，秒出初稿不费力
作为一名刚完成毕业论文的过来人，我太懂写论文的痛苦了 —— 选题纠结、资料收集困难、逻辑梳理不清、反复修改头疼、格式排版繁琐... 直到我发现了这套 AI 写作工具组合，简直是论文写作的 "开挂神器"，效率直接翻倍，原本…...