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是一个使用 …

spring boot整合ArtemisMQ进行手动消息确认

1、SpringBoot整合ArtemisMQ进行手动消息确认使用的是&#xff1a; factory.setSessionTransacted(false); factory.setSessionAcknowledgeMode(ActiveMQJMSConstants.INDIVIDUAL_ACKNOWLEDGE); 2、SpringBoot整合ActiveMQ进行手动消息确认使用的是&#xff1a; factory.setSe…

健康养生生活

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

开源模型应用落地-安全合规篇-用户输入价值观判断(三)

一、前言 在深度合规功能中,对用户输入内容的价值观判断具有重要意义。这一功能不仅仅是对信息合法性和合规性的简单审核,更是对信息背后隐含的伦理道德和社会责任的深刻洞察。通过对价值观的判断,系统能够识别可能引发不当影响或冲突的内容,从而为用户提供更安全、更和谐的…

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

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

LeetCode Hot100 11~20

目录 子串11. 滑动窗口最大值12. 最小覆盖子串 数组13. 最大子数组和14. 合并区间15. 翻转数组16. 除数字自身以外的乘积17. 缺失的第一个正数 矩阵18. 矩阵置零19. 螺旋矩阵20 旋转图像90度 子串 11. 滑动窗口最大值 本题使用deque来维护一个单调队列 注意删除元素和添加元素…

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

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

Spring MVC:深入理解与应用实践

前言 Spring MVC是Spring框架提供的一个用于构建Web应用程序的Model-View-Controller&#xff08;MVC&#xff09;实现。它通过分离业务逻辑、数据、显示来组织代码&#xff0c;使得Web应用程序的开发变得更加简洁和高效。本文将从概述、功能点、背景、业务点、底层原理等多个…

C学习:移位幻影之左移一个负数,会发生什么?

C学习&#xff1a;移位幻影之左移一个负数&#xff0c;会发生什么&#xff1f; 问题背景无符号数移位问题有符号数移位操作使低位置零问题 问题背景 C语言中&#xff0c;移位是个简单的问题&#xff0c;但又是个高风险的问题。 简单在于&#xff0c;大部分场景都可以理解为乘或…

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

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

tomcat的Mysql链接字符串问题

tomcat配置mysql链接需要改server.xml或content.xml。 但是server.xml或content.xml中mysql的配置看起来很古怪: url"jdbc:mysql://10.21.0.6:3306/hrdatabase?characterEncodinggbk&amp;autoReconnecttrue" 而使用springboot开发java应用&#xff0c;使用ya…

界面控件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)…

ORB-SLAM2源码学习:MapPoint.cc:MapPoint::UpdateNormalAndDepth()计算平均观测方向以及观测距离范围1

前言 这个函数是属于地图点属性的一部分。 1.函数声明 void MapPoint::UpdateNormalAndDepth() {.... } 2.函数定义 1.获取观测到该地图点的所有关键帧的信息 map<KeyFrame*,size_t> observations;KeyFrame* pRefKF;cv::Mat Pos;{unique_lock<mutex> lock1(…

【JVM什么时候触发YoungGC和FullGC】

YoungGC 年轻代Eden区满&#xff0c;就会触发YoungGC FullGC 老年代空间不足 经过多次GC后的大年龄对象会被放进老年代&#xff0c;或创建的大对象会直接在老年代分配&#xff0c;此时若老年代空间不足&#xff0c;就会触发FullGC。空间分配担保失败 触发YoungGC的时候会进行…

用“*”构成一个倒三角形:JAVA

输入&#xff1a;5 输出&#xff1a; ******* ***** *** * 代码&#xff1a; import java.util.Scanner; //倒三角 public class FF6 {public static void main(String[] args) {Scanner scannernew Scanner(System.in);while (scanner.hasNextInt()){int nscanner…

充分统计量(Sufficient Statistic)概念与应用: 中英双语

充分统计量&#xff1a;概念与应用 在统计学中&#xff0c;充分统计量&#xff08;Sufficient Statistic&#xff09; 是一个核心概念。它是从样本中计算得出的函数&#xff0c;能够完整且无损地表征样本中与分布参数相关的信息。在参数估计中&#xff0c;充分统计量能够帮助我…