当前位置： 首页 > news >正文

vue--制作购物车

news 2025/9/17 14:22:01

🤔如何制作出下列效果呢？👇

😶‍🌫️首先:

设置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}} &nbsp;&nbsp;</span><button v-on:click = "decreaseQuantity(index)">-</button><span class="quantity">{{ cartItems[index].quantity }}&nbsp;&nbsp;</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}} &nbsp;&nbsp;</span><button v-on:click = "decreaseQuantity(index)">-</button><span class="quantity">{{ cartItems[index].quantity }}&nbsp;&nbsp;</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--制作购物车

&#x1f914;如何制作出下列效果呢&#xff1f;&#x1f447; &#x1f636;‍&#x1f32b;️首先: 设置css样式&#xff1a; <style>body {font-family: Arial, sans-serif;}.cart-item {width: 50%;margin-bottom: 15px;padding: 10px;border: 2px solid gray;borde…...

编程日记 2024/11/25 6:19:46

深度测评腾讯云 HAI 智算服务：高性能 AI 计算的新标杆

本文 一、引言二、产品功能深度解析2.1 多样化的 GPU 配置选择2.2 预配置开发环境示例&#xff1a; 2.3 实时性能监控 三、核心技术特点与优势3.1 云端弹性扩展3.2 高性能计算架构 四、实际测试与代码案例4.1 NLP 案例&#xff1a;使用 BERT 进行情感分类数据集&#xff1a;IMD…...

编程日记 2024/11/25 6:18:45

MQ重复消费与消息顺序

如何避免消息重复消费 RocketMQ&#xff1a;给每个消息分配了一个MessageID。这个MessageID就可以作为消费者判断幂等的依据。这种方式不太建议&#xff0c;原因是在高并发场景下这个MessageID不保证全局唯一性。 最好由业务方创建一个与业务相关的全局唯一的ID来区分消息&am…...

编程日记 2024/11/25 6:17:44

应用商店双弹窗“APP在向用户申请权限时未同步告知用户申请此权限的理由”驳回uni-app应用上线的解决方法

目录 问题分析 解决方法 下载插件包&#xff1a;x-perm-apply-instr 将插件包导入进你项目中的uni_modules文件夹 在项目中的main.js文件中添加以下代码 完成 其它注意事项 addPermisionInterceptor 添加 uniApi 调用拦截 removePermisionInterceptor 移除 uniApi 调用…...

编程日记 2024/11/25 6:16:43

第 32 章 - Go语言 部署与运维

在Go语言的应用开发中&#xff0c;部署与运维是一个非常重要的环节。它不仅关系到应用能否顺利上线&#xff0c;还直接影响到应用的性能、安全性和可维护性。以下是根据您的需求整理的关于Go语言应用的打包和发布、容器化部署、监控和日志管理的相关内容。 1. 应用的打包和发布…...

编程日记 2024/11/25 6:15:42

噪杂环境离线语音通断器效果展示

介于之前的离线语音通断器模块的使用环境大部分为噪音比较小的环境中&#xff0c;部分客户对环境提出了更高的要求&#xff0c;能在噪杂、室外或者有一定的噪音的车内使用的模块开发需求被提高到了一个新的层次。最近找到某些能支持室外噪杂环境使用的芯片和模组&#xff0c;打…...

编程日记 2024/11/25 6:13:40

【django】扩展

1. Promise 1.1 对象和状态 是什么&#xff1f;是前端开发时js中的一个对象&#xff08;包裹&#xff09;。【对象】【异步请求】# 对象中有一个状态的值&#xff0c;status # 创建对象&#xff0c;不赋值&#xff0c;statuspendding let v1 new Promise(function(resolve, …...

编程日记 2024/11/25 6:12:39

逆向破解识别基础

找main函数&#xff1a; &#xff08;使用OllyDbg软件&#xff09; 方法一&#xff1a; 因为main函数需要三个参数&#xff0c;所以遇到三个参数加一个调用&#xff0c;那么可能是main函数。 方法二&#xff1a; 如果main函数中有字符串或者调用函数等一些唯一标识&#x…...

编程日记 2024/11/25 6:11:38

MFC 下拉框显示问题和控件自适应窗口大小

在mfc开发过程中&#xff0c;遇到了下拉框的两个问题&#xff0c;现在记录一下 1、把下拉框点开显示不全我放进去的多条文本 解决办法&#xff1a;把鼠标放到下拉框的倒三角去点一下&#xff0c;鼠标就会变成双向箭头&#xff0c;或者先选中一下下拉框再把鼠标移动到倒三角上去…...

编程日记 2024/11/25 6:09:35

Docker 的存储驱动及其优缺点

Docker 的存储驱动是容器文件系统的关键组成部分&#xff0c;决定了容器镜像和数据的存储方式。以下是常见的存储驱动及其优缺点&#xff1a; 1. OverlayFS/Overlay2 简介: Overlay 是现代 Linux 文件系统中一种高效的联合文件系统&#xff0c;Overlay2 是其改进版本&#xff0…...

编程日记 2024/11/25 6:08:33

单片机系统的性能指标有哪些？

单片机系统的性能指标涵盖了多个方面&#xff0c;这些指标共同决定了系统的整体性能。以下是单片机系统中常见的性能指标&#xff1a; 1. 处理器性能指标 1.1 时钟频率&#xff08;Clock Frequency&#xff09; 定义&#xff1a;处理器内核工作的时钟频率&#xff0c;通常以…...

编程日记 2024/11/25 6:07:32

波点音乐自动点击

波点音乐 import uiautomator2 as u2 import time import sys import os# 动态点击时间&#xff0c;打印剩余时间 def dynamic_sleep(seconds):wait_time secondsfor i in range(wait_time):print(f"Waiting... {wait_time - i} seconds remaining")sys.stdout.flu…...

编程日记 2024/11/25 6:06:31

HTTP 消息结构

HTTP 消息结构 1. 引言 超文本传输协议（HTTP）是互联网上应用最广泛的协议之一，它定义了客户端和服务器之间交换数据的格式和规则。HTTP消息是客户端和服务器之间通信的基本单位，包括请求消息和响应消息两种类型。本文将详细介绍HTTP消息的结构，包括其组成部分和格式。 …...

编程日记 2024/11/25 6:04:30

ESP32学习笔记_Bluetooth(1)——蓝牙技术与 BLE 通信机制简介

摘要(From AI): 这篇笔记详细讲解了蓝牙技术的分类、核心架构和通信流程&#xff0c;重点介绍了低功耗蓝牙&#xff08;BLE&#xff09;的协议栈、角色划分及连接机制&#xff0c;结合拓扑示例清晰阐述了蓝牙网络配置和操作过程 前言&#xff1a;本文档是本人在《ESP32-C3 物联…...

编程日记 2024/11/25 6:03:29

C0034.在Ubuntu中安装的Qt路径

Qt安装路径查询 在终端输入qmake -v如上中/usr/lib/x86_64-linux-gnu就是Qt的安装目录&#xff1b;...

编程日记 2024/11/25 6:02:27

jdbc学习——SQL注入

SQL注入介绍 SQL注入是通过操作输入来修改事先定义好的SQL语句&#xff0c;用以达到执行代码对服务器进行攻击的方法。 用户登录的本质&#xff1a;执行下面的sql语句 select * from tb_user where username zhangsan and password 123; 发生sql注入的本质 解决SQL注入的方…...

编程日记 2024/11/25 6:01:26

JavaEE-线程安全专题

文章目录 线程安全概述线程安全引入线程不安全原因概述 线程是随机调度的 线程安全概述 线程安全引入 线程安全问题是整个多线程专题的最核心也是最重要的章节, 如果不理解线程的安全, 是无法写出正确的多线程的代码的, 我们之前所写的代码都是在单一的线程环境之下写出的 “…...

编程日记 2024/11/25 6:00:24

Android 设备使用 Wireshark 工具进行网络抓包

背景 电脑和手机连接同一网络&#xff0c;想使用wireshark抓包工具抓取Android手机网络日志&#xff0c;有以下两种连接方法&#xff1a; Wi-Fi 网络抓包。USB 网络共享抓包。需要USB 数据线将手机连接到电脑&#xff0c;并在开发者模式中启用 USB 网络共享。 查看设备连接信…...

编程日记 2024/11/25 5:58:22

物联网无线局域网WiFi开发（一）：WiFi智能家居解决方案

一、WiFi智能家居硬件设计 &#xff08;一&#xff09;WiFi智能家居硬件方案 &#xff08;二&#xff09;硬件选型方案 二、WiFi开发环境搭建 &#xff08;一&#xff09;开发环境搭建 虚拟机lubuntu VirtualBox下载地址&#xff1a;https://www.virtualbox.org/wiki/Downl…...

编程日记 2024/11/25 5:54:16

GMAN解读（论文+代码）

一、注意力机制 注意力机制与传统的卷积神经网络不同的是&#xff0c;前者擅长捕获全局依赖和长程关系&#xff0c;权重会动态调整。而后者对于所有特征都使用同一个卷积核。关于更多注意力机制内容&#xff0c;详见&#xff1a; 注意力机制、自注意力机制、多头注意力机制、通…...

编程日记 2024/11/25 5:53:14

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/9/6 15:50:17

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2025/9/12 21:09:32

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/8/25 4:55:24

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/7/20 6:08:51

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2025/9/3 6:05:43

node.js的初步学习

那什么是node.js呢&#xff1f; 和JavaScript又是什么关系呢&#xff1f; node.js 提供了 JavaScript的运行环境。当JavaScript作为后端开发语言来说&#xff0c; 需要在node.js的环境上进行当JavaScript作为前端开发语言来说&#xff0c;需要在浏览器的环境上进行 Node.js 可…...

编程新知 2025/9/2 3:57:34

命令行关闭Windows防火墙

命令行关闭Windows防火墙 引言一、防火墙：被低估的"智能安检员"二、优先尝试！90%问题无需关闭防火墙方案1：程序白名单（解决软件误拦截）方案2：开放特定端口（解决网游/开发端口不通）三、命令行极速关闭方案方法一：PowerShell（推荐Win10/11）​方法二：CMD命令…...

编程新知 2025/8/27 20:07:03

CVE-2023-25194源码分析与漏洞复现(Kafka JNDI注入)

漏洞概述 漏洞名称&#xff1a;Apache Kafka Connect JNDI注入导致的远程代码执行漏洞 CVE编号&#xff1a;CVE-2023-25194 CVSS评分&#xff1a;8.8 影响版本&#xff1a;Apache Kafka 2.3.0 - 3.3.2 修复版本&#xff1a;≥ 3.4.0 漏洞类型&#xff1a;反序列化导致的远程代…...

编程新知 2025/9/13 19:59:40

STL 2迭代器

文章目录 1.迭代器2.输入迭代器3.输出迭代器1.插入迭代器 4.前向迭代器5.双向迭代器6.随机访问迭代器7.不同容器返回的迭代器类型1.输入 / 输出迭代器2.前向迭代器3.双向迭代器4.随机访问迭代器5.特殊迭代器适配器6.为什么 unordered_set 只提供前向迭代器&#xff1f; 1.迭代器…...

编程新知 2025/8/6 21:18:37

初级程序员入门指南

初级程序员入门指南 在数字化浪潮中&#xff0c;编程已然成为极具价值的技能。对于渴望踏入程序员行列的新手而言&#xff0c;明晰入门路径与必备知识是开启征程的关键。本文将为初级程序员提供全面的入门指引。 一、明确学习方向 &#xff08;一&#xff09;编程语言抉择 编…...

编程新知 2025/8/8 2:45:16