项目实战：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 背景 你的服务部署在了你的计算…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API，用于在函数组件中使用 state 和其他 React 特性（例如生命周期方法、context 等）。Hooks 通过简洁的函数接口，解决了状态与 UI 的高度解耦，通过函数式编程范式实现更灵活 Rea…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。 具体可参…...
云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风，以**「云启出海，智联未来｜打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办，现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
Frozen-Flask ：将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是：将一个 Flask Web 应用生成成纯静态 HTML 文件，从而可以部署到静态网站托管服务上，如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径：src/utils/timer.ts 完整代码： import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
GruntJS-前端自动化任务运行器从入门到实战
Grunt 完全指南：从入门到实战 一、Grunt 是什么？ Grunt是一个基于 Node.js 的前端自动化任务运行器，主要用于自动化执行项目开发中重复性高的任务，例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...
现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？
现有的 Redis 分布式锁库（如 Redisson）相比于开发者自己基于 Redis 命令（如 SETNX, EXPIRE, DEL）手动实现分布式锁，提供了巨大的便利性和健壮性。主要体现在以下几个方面： 原子性保证 (Atomicity)ÿ…...
十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建
【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...