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>苹果 &nbsp;&nbsp;</span><button>-</button><span class="quantity">1&nbsp;&nbsp;</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}}&nbsp;&nbsp;</span>

那么我们如何控制商品的增加和减少呢

我们只需要定义一个函数 并且使用v-on的方法绑定即可,事件触发为点击

注意:在做减少按钮时,我们要通过if判断限制一下商品数,否则会出现负数

 <button v-on:click = "pre(index)">-</button><span class="quantity">{{cartItems[index].quantity}} &nbsp;&nbsp;</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}}&nbsp;&nbsp;</span><button v-on:click = "pre(index)">-</button><span class="quantity">{{cartItems[index].quantity}} &nbsp;&nbsp;</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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/63030.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

系统加固-Linux不允许用户使用密码登录,只能使用密钥登录

一、密码登录的安全隐患 传统的密码登录方式&#xff0c;尽管简单直接&#xff0c;却存在诸多安全隐患。首先&#xff0c;密码本身容易被猜测或通过暴力破解手段获得。特别是当用户设置了过于简单或常见的密码时&#xff0c;系统面临的安全风险将显著增加。其次&#xff0c;密…

大数据实验E5HBase:安装配置,shell 命令和Java API使用

实验目的 熟悉HBase操作常用的shell 命令和Java API使用&#xff1b; 实验要求 掌握HBase的基本操作命令和函数接口的使用&#xff1b; 实验平台 操作系统&#xff1a;Linux&#xff08;建议Ubuntu16.04或者CentOS 7 以上&#xff09;&#xff1b;Hadoop版本&#xff1a;3…

【Vivado】xdc约束文件编写

随手记录一下项目中学到的约束文件编写技巧。 时序约束 创建生成时钟 参考链接&#xff1a; Vivado Design Suite Tcl Command Reference Guide (UG835) Vivado Design Suite User Guide: Using Constraints (UG903) 通过Clocking Wizard IP创建的时钟&#xff08;MMCM或…

Electron + Vue 简单实现窗口程序(Windows)从零到一

前言 想做一个桌面应用程序&#xff0c;一直没有找到简单快速可上手的框架。刚好有点前端的底子&#xff0c;就发现了Electron。关于Electron的介绍&#xff0c;请移步 https://www.electronjs.org/ 查阅。 简单来说&#xff0c;引用官网的话&#xff0c;Electron是一个使用 …

健康养生生活

在快节奏的现代生活中&#xff0c;健康养生愈发成为人们关注的焦点。它不仅是一种生活方式&#xff0c;更是对生命质量的珍视与呵护。 健康养生&#xff0c;饮食为先。合理的膳食结构是维持身体健康的基石。我们应确保每餐营养均衡&#xff0c;增加蔬菜、水果、全谷物以及优质蛋…

如何避免数据丢失:服务器恢复与预防策略

在当今数字时代&#xff0c;数据对于个人和企业来说都至关重要。数据丢失可能会导致严重的财务损失、业务中断甚至法律责任。因此&#xff0c;采取措施防止数据丢失至关重要。本文将讨论服务器数据丢失的常见原因以及如何防止数据丢失的有效策略。 服务器数据丢失的常见原因 服…

网站访问统计A/B测试与数据分析

在网站运营中&#xff0c;访问统计和数据分析是优化用户体验和提高转化率的关键工具。A/B测试作为一种数据驱动的方法&#xff0c;能够帮助网站运营者验证设计和内容的有效性。A/B测试的基本原理是同时展示两个不同的版本&#xff08;A和B&#xff09;&#xff0c;通过比较它们…

芯驰X9SP与汽车麦克风-打造无缝驾驶体验

当今汽车技术的进步不仅提升了驾驶体验&#xff0c;还改变了我们与车辆互动的方式。汽车麦克风作为车内语音控制系统的重要组成部分&#xff0c;正逐渐成为现代汽车的标配。 技术原理 汽车麦克风主要依赖于声音传感技术&#xff0c;通常包括电容式麦克风和动圈式麦克风。这些…

界面控件Syncfusion Essential Studio®现在已完全支持 .NET 9

Syncfusion Essential Studio现在完全支持 .NET 9&#xff0c;可最新版本2024 Volume 3 版本中使用&#xff01;通过此更新&#xff0c;Blazor、.NET MAUI、WPF、WinForms、WinUI和ASP.NET Core 平台中的 Syncfusion 组件以及文档处理库已准备好让您利用 .NET 9 中的最新功能。…

剑指offer(专项突破)---字符串

总目录&#xff1a;剑指offer&#xff08;专项突破&#xff09;---目录-CSDN博客 1.字符串的基本知识 C语言中&#xff1a; 函数名功能描述strcpy(s1, s2)将字符串s2复制到字符串s1中&#xff0c;包括结束符\0&#xff0c;要求s1有足够空间容纳s2的内容。strncpy(s1, s2, n)…

yarn : 无法加载文件 E:\node\node_global\yarn.ps1,因为在此系统上禁止运行脚本

先确保安装了yarn —— npm install -g yarn 终端输入set-ExecutionPolicy RemoteSigned 若要在本地计算机上运行您编写的未签名脚本和来自其他用户的签名脚本&#xff0c;请使用以下命令将计算机上的执行策略更改为RemoteSigned 再去使用yarn okk~

python学opencv|读取视频(二)制作gif

【1】引言 前述已经完成了图像和视频的读取学习&#xff0c;本次课学习制作gif格式动图。 【2】教程 实际上想制作gif格式动图是一个顺理成章的操作&#xff0c;完成了图像和视频的处理&#xff0c;那就自然而然会对gif的处理也产生兴趣。 不过在opencv官网、matplotlib官网…

高校心理教育辅导|基于springBoot的高校心理教育辅导系统设计与实现(附项目源码+论文+数据库)

私信或留言即免费送开题报告和任务书&#xff08;可指定任意题目&#xff09; 目录 一、摘要 二、相关技术 三、系统设计 四、数据库设计 五、核心代码 六、论文参考 七、源码获取 一、摘要 随着Internet技术的发展&#xff0c;心理教育辅导系统应运而生&…

网络安全、Web安全、渗透测试之笔经面经总结(一)

本篇文章总结涉及以下几个方面&#xff1a; 一&#xff1a;对称加密非对称加密&#xff1f; 对称加密&#xff1a;加解密用同一密钥&#xff0c;密钥维护复杂n&#xff08;n-1&#xff09;/2&#xff0c;不适合互联网传输密钥&#xff0c;加解密效率高。应用于加密数据。 非…

Nginx静态资源配置

基本配置原则 明确资源目录&#xff1a;为不同类型的静态资源指定不同的路径&#xff0c;这样可以避免路径冲突&#xff0c;并且便于管理。正确设置文件权限&#xff1a;确保 Nginx 具有读取静态资源的权限。缓存优化&#xff1a;为静态资源设置缓存头&#xff08;如 expires&…

华为NPU服务器昇腾Ascend 910B2部署通义千问Qwen2.5——基于mindie镜像一路试错版(三)

文章目录 前言纯模型推理启动服务后面干什么?这可咋整啊?愁死了!总结前言 这是咱这个系列的第三个文章了。 毕竟,这是我好几天摸索出的经验,能帮助各位在几个小时内领会,我觉得也算是我的功劳一件了。 所以,一是希望大家耐心看下去,耐心操作下去;而是恳请各位多多关…

Pixtral Large开源:Mistral AI的1240亿参数多模态模型超越GPT-4o等竞争对手

Pixtral Large是什么 Pixtral Large是由法国人工智能初创公司Mistral AI开发的超大多模态模型&#xff0c;拥有1240亿参数&#xff0c;2024年11月18日正式对外发布。它基于Mistral Large 2开发而成&#xff0c;具备1230亿参数的多模态解码器和10亿参数的视觉编码器。这个模型能…

阿里云整理(二)

阿里云整理 1. 访问网站2. 专业名词2.1 域名2.2 域名备案2.3 云解析DNS2.4 CDN2.5 WAF 1. 访问网站 用户使用浏览器访问网站大体分为几个过程&#xff1a; 用户在浏览器输入域名URL&#xff0c;例如www.baidu.com。 不过&#xff0c;浏览器并不知道为该域名提供服务的服务器具…

【联表查询】.NET开源 ORM 框架 SqlSugar 系列

.NET开源 ORM 框架 SqlSugar 系列 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列【数据事务…

标贝科技受邀出席2024东湖国际人工智能高峰论坛并入选数据要素合作伙伴名单

近日&#xff0c;备受瞩目的2024东湖国际人工智能高峰论坛在中国光谷科技会展中心隆重召开。会议以“智联世界&#xff0c;共创未来”为主题&#xff0c;省市相关单位、专家学者、产学研各界百余家联合体单位齐聚一堂&#xff0c;共话人工智能领域的最新技术及产业发展趋势。会…