Vue项目(购物车)

目录

购物车效果展示:

购物车代码:


购物车效果展示:

此项目添加、修改、删除数据的地方都写了浏览器都会把它存储起来

下次运行项目时会把浏览器数据拿出来并在页面展示

Video_20230816145047

购物车代码:

复制完代码,需改下script中引入的vue文件地址;可直接使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><div><form action=""> 商品名称:<input type="text" v-model="productName" name="productName">商品单价:<input type="text" v-model="productPrice" name="productPrice"><input type="button" value="添加商品" @click="addProduct"></form></div><ul><li v-for="(pro,index) in productList" :key="index">商品名称:{{pro.productName}}=========商品单价:{{pro.productPrice}}&nbsp;&nbsp;&nbsp;<button type="button" @click="addProToCart(index)">添加到购物车</button><button type="button" @click="deleteProToCart(index)">删除此商品</button></li></ul><cart :cartlist="cartList"></cart></div><template id="cartHtml"><div><table border="1"><tr><td>全选<input type="checkbox" @change="checkActive" id="isCheck"></td><td>商品名称</td><td>商品单价</td><td>商品数量</td><td>商品价格</td></tr><tr v-for="(pro,index) in cartlist" :key="index"><td><input type="checkbox" v-model="pro.active" @change="ziCheck"></td><td>{{pro.productName}}</td><td>{{pro.productPrice}}</td><td><button type="button" @click="reduceProNum(index)">-</button>{{pro.productNum}}<button type="button" @click="addProNum(index)">+</button></td><td>{{pro.productPrice*pro.productNum}}</td></tr><tr><td colspan="3">选中的商品:{{activeNum}}/{{cartlist.length}}</td><td colspan="2">总价格:{{totalPrice}}</td></tr></table></div></template></body>
<script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址填写-->
<script>//创建一个购物车子组件var cart={template:"#cartHtml",props:["cartlist"],methods:{addProNum(index){let product =this.cartlist[index];product.productNum++localStorage.setItem('cartList', JSON.stringify(this.cartlist));},reduceProNum(index){let product =this.cartlist[index];//判断商品数量是否为一if (product.productNum==1) {this.cartlist.splice(index,1)//为一,在数组中删除掉//删除完后把数据放在浏览器里面把key值设置为cartListlocalStorage.setItem('cartList', JSON.stringify(this.cartlist));}else{product.productNum--//减完之后把数据放在浏览器里面把key值设置为cartListlocalStorage.setItem('cartList', JSON.stringify(this.cartlist));}},checkActive(){if(document.getElementById("isCheck").checked){for(var i=0;i<this.cartlist.length;i++){this.cartlist[i].active=true;}//全选为true后把数据放在浏览器里面把key值设置为cartListlocalStorage.setItem('cartList', JSON.stringify(this.cartlist));}else{for(var i=0;i<this.cartlist.length;i++){this.cartlist[i].active=false;}//全选为false后把数据放在浏览器里面把key值设置为cartListlocalStorage.setItem('cartList', JSON.stringify(this.cartlist));}},ziCheck(){//当多选框变化时把数据放在浏览器里面把key值设置为cartListlocalStorage.setItem('cartList', JSON.stringify(this.cartlist));},},computed:{//计算购物车商品总和activeNum(){let activeProductList=this.cartlist.filter(item=>{return item.active})return activeProductList.length;},//计算购物车商品的总价格totalPrice(){let result=0;for(pro of this.cartlist){if(pro.active){result=result+pro.productPrice*pro.productNum}}return result}},updated() {//当多选框都为true全选后的多选框为truevar isActive=this.cartlist.every(c => c.active)if (isActive) {document.getElementById("isCheck").checked=true} else {document.getElementById("isCheck").checked=false}},}let app=new Vue({el:"#app",data() {return {productName:'',productPrice:'',productList:[],cartList:[]}},methods: {addProduct(){let isnameOk=true;let ispriceOk=true;if (this.productName=="") {isnameOk=false}if(isNaN(this.productPrice) || this.productPrice<=0){ispriceOk=false;}if(isnameOk && ispriceOk){//查找新增的商品是否存在商品列表中,如果不存在返回-1let findindex=this.productList.findIndex(item=>{return item.productName==this.productName})//判断商品列表中是否存在新增的商品if(findindex==-1){//把新商品添加到商品列表中this.productList.push({productName:this.productName,productPrice:this.productPrice})//把数据放在浏览器里面把key值设置为productListlocalStorage.setItem('productList', JSON.stringify(this.productList));//添加完表单中的输入框调为空this.productName='';this.productPrice='';}else{alert("此商品已经存在商品列表!")//商品已存在,给出提示}}else{alert("请输入合适的商品名称及单价")}},addProToCart(index){let newproduct=this.productList[index];//根据下标从商品列表里面取出商品//从购物车列表中查找,是否存在新的商品,如果找到返回购物车的商品let product= this.cartList.find(item=>{return item.productName==newproduct.productName})if (product) {//如果有对应的商品则数量加一product.productNum++}else{//没有对应的商品就添加商品到购物车this.cartList.push({productName:newproduct.productName,productPrice:newproduct.productPrice,productNum:1,active:true})//把数据放在浏览器里面把key值设置为cartListlocalStorage.setItem('cartList', JSON.stringify(this.cartList));}},deleteProToCart(index){let isOk=confirm("是否删除此商品!")if(isOk){this.productList.splice(index,1)}//把数据放在浏览器里面把key值设置为productListlocalStorage.setItem('productList', JSON.stringify(this.productList));}},//生命周期钩子,部署完后执行从浏览器中把数据拿出来mounted(){for(pro of JSON.parse(localStorage.getItem("productList"))){this.productList.push({productName:pro.productName,productPrice:pro.productPrice});}for(pro of JSON.parse(localStorage.getItem("cartList"))){this.cartList.push({productName:pro.productName,productPrice:pro.productPrice,productNum:pro.productNum,active:pro.active});}},components:{cart},})
</script>
</html>

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

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

相关文章

leetcode每日一题_2682.找出转圈游戏输家

2682.找出转圈游戏输家 题目: n 个朋友在玩游戏。这些朋友坐成一个圈&#xff0c;按 顺时针方向 从 1 到 n 编号。从第 i 个朋友的位置开始顺时针移动 1 步会到达第 (i 1) 个朋友的位置&#xff08;1 < i < n&#xff09;&#xff0c;而从第 n 个朋友的位置开始顺时针移…

设计模式之原型模式Prototype的C++实现

1、原型模式提出 在软件功能设计中&#xff0c;经常面临着“某些结构复杂的对象”的创建工作&#xff0c;且创建的对象想拥有其他对象在某一刻的状态&#xff0c;则可以使用原型模型。原型模型是通过拷贝构造函数来创建对象&#xff0c;并且该对象拥有其他对象在某一刻的状态。…

Docker基础入门:镜像、容器导入导出与私有仓库搭建

Docker基础入门&#xff1a;镜像导入导出与私有仓库搭建 一、 Docker镜像、容器的导入和导出1.1、Docker镜像的导出1.2、Docker镜像的载入1.3、Docker容器的导出1.4、Docker容器的导入 二、 镜像和容器导出和导入的区别:三、commit操作_本地镜像发布到阿里云3.1、commit操作有关…

ppt中线材相交接的地方,如何绘画

ppt中线材相交接的地方&#xff1a; 在ppt中绘画线材相互交接的地方&#xff1a; 1.1绘图工具中的“弧形” 1.2小技巧 “弧形”工具点一下&#xff0c;在ppt中如下 1.3拖动活动点进行调整图形 1.4绘画圆弧 1.5调整“圆弧”的大小&#xff0c;鼠标放在“黄色点”位置&#xf…

【JVM】垃圾回收算法

目录 一、判断对象已“死” 1.1、引用计数算法 1.2、可达性分析算法 1.3、引用的概念 二、垃圾收集算法理论 2.1、分代收集理论 三、垃圾收集算法 3.1、标记--清除算法 3.2、标记--复制算法 3.3、标记--整理算法 一、判断对象已“死” 在堆里面存放着Java世界中几乎所…

【数据结构】二叉搜索树

&#x1f680; 作者简介&#xff1a;一名在后端领域学习&#xff0c;并渴望能够学有所成的追梦人。 &#x1f40c; 个人主页&#xff1a;蜗牛牛啊 &#x1f525; 系列专栏&#xff1a;&#x1f6f9;数据结构、&#x1f6f4;C &#x1f4d5; 学习格言&#xff1a;博观而约取&…

亿赛通电子文档安全管理系统任意文件上传漏洞复现

0x01 产品简介 亿赛通电子文档安全管理系统&#xff08;简称&#xff1a;CDG&#xff09;是一款电子文档安全加密软件&#xff0c;该系统利用驱动层透明加密技术&#xff0c;通过对电子文档的加密保护&#xff0c;防止内部员工泄密和外部人员非法窃取企业核心重要数据资产&…

excel隔行取数求和/均值

问题描述 如图有好多组数据&#xff0c;需要求每组数据对应位置的平均值 解决方法 SUM(IF(MOD(ROW(C$2:C$81), 8) MOD(ROW(C2), 8), C$2:C$81, 0))/10然后下拉右拉扩充即可&#xff0c;其中需要根据自身需要修改一些数据 SUM(IF(MOD(ROW(起始列$起始行:结束列$结束行), 每…

MATLAB图论合集(一)基本操作基础

本帖总结一些经典的图论问题&#xff0c;通过MATLAB如何计算答案。近期在复习考研&#xff0c;以此来巩固一下相关知识——虽然考研肯定不能用MATLAB代码哈哈&#xff0c;不过在实际应用中解决问题还是很不错的&#xff0c;比C易上手得多~ 图论中的图&#xff08;Graph&#xf…

FOSSASIA Summit 2023 - 开源亚洲行

作者 Ted 致歉&#xff1a;本来这篇博客早就该发出&#xff0c;但是由于前几个月频繁差旅导致精神不佳&#xff0c;再加上后续我又参加了 Linux 基金会 7/27 在瑞士日内瓦举办的 Open Source Congress&#xff0c;以及 7/29-30 台北的 COSCUP23&#xff0c;干脆三篇连发&#x…

仪表板展示 | DataEase看中国:2023年中国电影市场分析

背景介绍 随着《消失的她》、《变形金刚&#xff1a;超能勇士崛起》、《蜘蛛侠&#xff1a;纵横宇宙》、《我爱你》等国内外影片的上映&#xff0c;2023年上半年的电影市场也接近尾声。据国家电影专资办初步统计&#xff0c;上半年全国城市院线票房达262亿元&#xff0c;已经超…

一、计算机网络体系结构

Content 1. 计算机网络的组成2. 计算机网络的功能3. 计算机网络的分类4. 计算机网络的性能指标5. 计算机网络分层结构OSI模型TCP/IP模型互联网五层模型共同点&#xff1a; 6. 计算机网络提供的服务按三种方式分类面向连接服务和无连接服务可靠服务和不可靠服务有连接服务和无连…

服务器卡顿了该如何处理

服务器卡顿了该如何处理 当Windows系统的服务器出现卡顿问题时&#xff0c;以下是一些常见的故障排除步骤&#xff1a; 1.检查网络连接&#xff1a;确保服务器的网络连接正常。检查网络设备、交换机、防火墙等设备&#xff0c;确保它们正常运行。尝试通过其他计算机访问服务器…

Flink SQL TopN

Flink SQL 对于批处理&#xff08;Batch&#xff09;和流处理&#xff08;streaming&#xff09;模式的SQL&#xff0c;都支持 Top-N 查询。Top-N 查询可以根据指定列排序后获得前 N 个最小或最大值。并且该结果集还可用于进一步分析。Flink 使用 OVER 窗口子句和过滤条件的组合…

近 2000 台 Citrix NetScaler 服务器遭到破坏

Bleeping Computer 网站披露在某次大规模网络攻击活动中&#xff0c;一名攻击者利用被追踪为 CVE-2023-3519 的高危远程代码执行漏洞&#xff0c;入侵了近 2000 台 Citrix NetScaler 服务器。 研究人员表示在管理员安装漏洞补丁之前已经有 1200 多台服务器被设置了后门&#x…

python学习笔记——软件安装

目录 1. 安装并验证Python环境 2. 安装并设置Visual Studio Code编辑器 3. 设置Visual Studio Code编辑器 4.软件安装包 1. 安装并验证Python环境 首先&#xff0c;双击打开python安装包。 注意⚠️ &#xff1a; 安装之前需要关闭杀毒软件&#xff0c;比如360。 然后&am…

如何快速优化 CnosDB 数据库性能与延迟:使用 Jaeger 分布式追踪系统

在正式的生产环境中&#xff0c;数据库的性能和延迟对于确保系统的稳定和高效运行至关重要。特别是在与 CnosDB 数据库进行交互时&#xff0c;更深入地了解其表现变得尤为重要。这时Jaeger 分布式追踪系统发挥了巨大的作用。在本篇博客中&#xff0c;我们将深入探讨如何通过使用…

探索网络架构的关键角色:六种常用的服务器类型

在今天的数字时代&#xff0c;服务器是支撑各种在线服务和应用的基石。不同类型的服务器在网络架构中扮演着不同的角色&#xff0c;从网页传输到电子邮件交换&#xff0c;再到文件传输和内容分发。本文将深入探讨六种最常用的服务器类型&#xff0c;解释它们的功能和重要性&…