Vue框架开发一个简单的购物车（Vue.js）
让我们利用所学知识来开发一个简单的购物车
（记得暴露属性和方法！！！）
首先来看一下最基本的一个html框架
<!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"><div class="buttons"><span>苹果 </span><button>-</button><span class="quantity">1 </span><button>+</button><p>请输入价格：<input type="text"/> 元/斤 <br> 单价：1 元/斤</p></div></div><!-- 提示：可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价--><h3>商品总数: <ins> 1 </ins> 件</h3><h3>商品总价: <ins> 1 </ins> 元</h3></div><script type="module">import { createApp, reactive, computed } from './vue.esm-browser.js'createApp({setup() {// 1.定义属性：存储商品的（响应式）数组 // 2.定义方法：增加商品数// 3.定义方法：减少商品数// 4.定义方法：计算商品总数// 5.定义方法：计算商品总价// 6.暴露属性和方法}}).mount('#app');</script>
</body>
</html>效果如下：
目前是一个静态的一个网页
首先定义属性：存储商品的（响应式）数组（使用v-for遍历）
<div class="cart-item" v-for="(item,index) in cartItems">const cartItems = reactive([{ name: '苹果', quantity: 1, unit_price: 1 },{ name: '香蕉', quantity: 1, unit_price: 1 },{ name: '菠萝', quantity: 1, unit_price: 1 },]);
我们可以发现我们已经做出了三个链接，但是名字都是苹果，这个时候我们添加一个插值即可
<span>{{item.name}} </span>
那么我们如何控制商品的增加和减少呢
我们只需要定义一个函数 并且使用v-on的方法绑定即可，事件触发为点击
注意：在做减少按钮时，我们要通过if判断限制一下商品数，否则会出现负数
<button v-on:click = "pre(index)">-</button><span class="quantity">{{cartItems[index].quantity}} </span><button v-on:click = "next(index)">+</button>// 2.定义方法：增加商品数const next = (index) =>{cartItems[index].quantity ++;} // 3.定义方法：减少商品数const pre = (index) => {if ( cartItems[index].quantity>1) {cartItems[index].quantity --;}}
接着我们要计算商品的总数，那么该如何计算呢
可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价
<h3>商品总数: <ins> {{totalItem()}} </ins> 件</h3>// 4.定义方法：计算商品总数const totalItem = () =>{let total_items = 0 ;for(const item of cartItems){total_items +=item.quantity;}return total_items}
计算完总数，我们就该来计算总价了，同理可得使用computer计算属性，定义一个变量，在函数里面写一个for遍历即可（输入框里面属于写一个双向绑定v-model从而实现单价变化总价随着变化）
<input type="text" v-model="cartItems[index].unit_price"> 元/斤 <br> <h3>商品总价: <ins> {{totalprice}} </ins> 元</h3>// 5.定义方法：计算商品总价const totalprice = computed(()=>{let total_price = 0; for(const money of cartItems){ total_price += money.unit_price*money.quantity; }return total_price })
这样我们一个简单的购物车便开发成功啦
完整代码如下：
<!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 = "pre(index)">-</button><span class="quantity">{{cartItems[index].quantity}} </span><button v-on:click = "next(index)">+</button><p>请输入价格：<input type="text" v-model="cartItems[index].unit_price"> 元/斤 <br> 单价：1 元/斤</p></div></div><!-- 提示：可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价--><h3>商品总数: <ins> {{totalItem()}} </ins> 件</h3><h3>商品总价: <ins> {{totalprice}}</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 next = (index) =>{cartItems[index].quantity ++;} // 3.定义方法：减少商品数const pre = (index) => {if ( cartItems[index].quantity>1) {cartItems[index].quantity --;}}// 4.定义方法：计算商品总数const totalItem = () =>{let total_items = 0 ;for(const item of cartItems){total_items +=item.quantity;}return total_items}// 5.定义方法：计算商品总价const totalprice = computed(()=>{let total_price = 0; for(const money of cartItems){ total_price += money.unit_price*money.quantity; }return total_price })// 6.暴露属性和方法return {cartItems,pre,next,totalItem,totalprice,};},}).mount('#app');</script>
</body>
</html>
相关文章：
Vue框架开发一个简单的购物车（Vue.js）
让我们利用所学知识来开发一个简单的购物车 （记得暴露属性和方法！！！） 首先来看一下最基本的一个html框架 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"&…...
Windows Terminal Solarized Dark 配色方案调整
起因 Widnows 10/11 下面自带的 Terminal 还是比较方便的，因为不需要安装额外的 Terminal 软件。 我喜欢 Solarized Dark 配色方案，虽然有人批评这个配色方案比较老，但我觉得它比较优雅，尤其对外这种眼神比较差的人，比…...
PyTorch张量运算与自动微分
PyTorch张量运算与自动微分 PyTorch由Facebook人工智能研究院于2017年推出，具有强大的GPU加速张量计算功能，并且能够自动进行微分计算，从而可以使用基于梯度的方法对模型参数进行优化，大部分研究人员、公司机构、数据比赛都使用P…...
【从零开始的LeetCode-算法】3264. K 次乘运算后的最终数组 I
给你一个整数数组 nums ，一个整数 k 和一个整数 multiplier 。 你需要对 nums 执行 k 次操作，每次操作中： 找到 nums 中的 最小 值 x ，如果存在多个最小值，选择最 前面 的一个。将 x 替换为 x * multiplier 。 请你…...
【Linux】gdb / cgdb 调试 + 进度条
🌻个人主页：路飞雪吖~ 🌠专栏：Linux 目录 一、Linux调试器-gdb 🌟开始使用 🌠小贴士： 🌟gdb指令 🌠小贴士： ✨watch 监视 ✨打条件断点 二、小程序----进…...
Jenkins Nginx Vue项目自动化部署
目录 一、环境准备 1.1 Jenkins搭建 1.2 NVM和Nodejs安装 1.3 Nginx安装 二、Jenkins配置 2.1 相关插件安装 2.2 全局工具安装 2.3 环境变量配置 2.4 邮箱配置（构建后发送邮件） 2.5 任务配置 三、Nginx配置 3.1 配置路由转发 四、部署项目 …...
视频汇聚平台Liveweb国标GB28181视频平台监控中心设计
在现代安防视频监控领域，Liveweb视频汇聚平台以其卓越的兼容性和灵活的拓展能力，为用户提供了一套全面的解决方案。该平台不仅能够实现视频的远程监控、录像、存储与回放等基础功能，还涵盖了视频转码、视频快照、告警、云台控制、语音对讲以及…...
文件比较和文件流
文件比较和文件流 一、文本比较工具 diff1.基本用法1.1输出格式 2.常用选项 二、文件流1.文件的打开模式2.文件流的分类ifstreamofstreamfstrem区别 3.文件流的函数1. 构造函数2. is_open 用于判断文件是否打开3. open4. getline5. close6. get()7. read8. write9. put10. gcou…...
【2024最新】基于Springboot+Vue的就业信息管理系统Lw+PPT
作者：计算机搬砖家 开发技术：SpringBoot、php、Python、小程序、SSM、Vue、MySQL、JSP、ElementUI等，“文末源码”。 专栏推荐：SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏：Java精选实战项…...
PySide6 QSS(Qt Style Sheets) Reference: PySide6 QSS参考指南
Qt官网参考资料： QSS介绍： Styling the Widgets Application - Qt for Pythonhttps://doc.qt.io/qtforpython-6/tutorials/basictutorial/widgetstyling.html#tutorial-widgetstyling QSS 参考手册： Qt Style Sheets Reference | Qt Widge…...
【笔记】成为雍正
观古代历史，不过帝王一家一姓之家史 时间 1662年，田文镜出生。1672年，张廷玉出生。1674年，胤礽出生。1678年，胤禛出生。1679年，年羹尧出生。1680年，鄂尔泰出生。1700年，索额图被赐死…...
Codeforces Round 913 (Div. 3)
题目链接 B. YetnotherrokenKeoard 题意 输入 输出 思路 用两个栈分别维护小写字母下标和大写字母下标，用一个vis数组标记字母是否删除 示例代码 void solve() {string s;cin >> s;int n s.size();vector<bool> vis(n, false);stack<int>sk…...
斐波那契数
C语言实现斐波那契数列的多种方法_斐波那契数列c语言-CSDN博客 题目描述 斐波那契数列为：1,1,2,3,5,8,13.....，常规递推公式f(n)f(n-1)f(n-2); 输入描述 输入一个整数n(0<n<50),为多组数据。 输出描述 输出第n个斐波那契数 样例输入 1 2 4样例输出…...
Redis高阶集群搭建+集群读写
问题 容量不够，redis 如何进行扩容？并发写操作， redis 如何分摊？另外，主从模式，薪火相传模式，主机宕机，导致 ip 地址发生变化，应用程序中配置需要修改对应的主机地址、端…...
Vision Transformer（vit）的主干
图解： 代码： class VisionTransformer(nn.Module):def __init__(self, img_size224, patch_size16, in_c3, num_classes1000,embed_dim768, depth12, num_heads12, mlp_ratio4.0, qkv_biasTrue,qk_scaleNone, representation_sizeNone, distilledFalse,…...
手撸了一个文件传输工具
在日常的开发与运维中，文件传输工具是不可或缺的利器。无论是跨服务器传递配置文件，还是快速从一台机器下载日志文件，一个高效、可靠且简单的文件传输工具能够显著提高工作效率。今天，我想分享我自己手撸一个文件传输工具的全过程…...
Java程序调kubernetes(k8s1.30.7)core API简单示例，并解决403权限验证问题，即何进行进行权限授权以及验证
简单记录问题 一、问题描述 希望通过Java程序使用Kubernetes提供的工具包实现对Kubernetes集群core API的调用，但是在高版本上遇见权限验证问题4xx。 <dependency><groupId>io.kubernetes</groupId><artifactId>client-java</artifact…...
java八股-Redis Stream和RocketMQ实现的解决方案
文章目录 Redis Stream方案：ShortLinkStatsSaveProducer.javaShortLinkStatsSaveConsumer.java RocketMQ方案ShortLinkStatsSaveProducer.javaShortLinkStatsSaveConsumer.java Redis Stream方案： ShortLinkStatsSaveProducer.java package com.nageoff…...
第29天 MCU入门
目录 MCU介绍 MCU的组成与作用 电子产品项目开发流程 硬件开发流程 常用元器件初步了解 硬件原理图与PCB板 常见电源符号和名称 电阻 电阻的分类 贴片电阻的封装说明： 色环电阻的计算 贴片电阻阻值计算 上拉电阻与下拉电阻 电容 电容的读数 二极管 LED 灯电路 钳位作…...
【Python网络爬虫笔记】6- 网络爬虫中的Requests库
一、概述 Requests 是一个用 Python 语言编写的、简洁且功能强大的 HTTP 库。它允许开发者方便地发送各种 HTTP 请求，如 GET、POST、PUT、DELETE 等，并且可以轻松地处理请求的响应。这个库在 Python 生态系统中被广泛使用，无论是简单的网页数…...
后进先出（LIFO）详解
LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子（…...
深入剖析AI大模型：大模型时代的 Prompt 工程全解析
今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数 这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节，供应链协同管理在供应链上下游企业之间建立紧密的合作关系，通过信息共享、资源整合、业务协同等方式，实现供应链的全面管理和优化，提高供应链的效率和透明度，降低供应链的成…...
家政维修平台实战20：权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学（ECC）是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础，例如椭圆曲线数字签…...
HTML前端开发：JavaScript 常用事件详解
作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件 当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...
LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》
这段 Python 代码是一个完整的 知识库数据库操作模块，用于对本地知识库系统中的知识库进行增删改查（CRUD）操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 📘 一、整体功能概述 该模块…...
MFC 抛体运动模拟：常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...