当前位置： 首页 > news >正文

Vue项目（购物车）

news 2026/5/21 1:45:04

目录

购物车效果展示：

购物车代码：

购物车效果展示：

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

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

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>

相关文章：

Vue项目（购物车）

目录 购物车效果展示&#xff1a; 购物车代码&#xff1a; 购物车效果展示&#xff1a; 此项目添加、修改、删除数据的地方都写了浏览器都会把它存储起来 下次运行项目时会把浏览器数据拿出来并在页面展示 Video_20230816145047 购物车代码&#xff1a; 复制完代码&#xff0…...

编程日记 2023/8/17 1:53:34

23.08.16驱动点灯

#include <linux/init.h> #include <linux/module.h> #include <linux/fs.h> #include <linux/uaccess.h> #include <linux/io.h> #include <linux/device.h> #include "head.h"int major; char kbuf[128] {0};//定义指针接收映…...

编程日记 2023/8/17 1:52:32

数据结构——堆

数据结构——堆 堆堆简介堆的分类 二叉堆过程插入操作 删除操作向下调整&#xff1a; 增加某个点的权值实现参考代码&#xff1a;建堆方法一&#xff1a;使用 decreasekey&#xff08;即&#xff0c;向上调整&#xff09;方法二&#xff1a;使用向下调整 应用对顶堆 其他&#…...

编程日记 2023/8/17 1:51:30

重复学习1：NLP

目录 1. 自然语言处理与知识图谱1.1 RNN 循环神经网络初探 2. 吴恩达深度学习 1. 自然语言处理与知识图谱 1.1 RNN 循环神经网络初探 1.1.2 回顾数据维度与神经网络(1) 2. 吴恩达深度学习 P151 1.1 为什么选择序列模型&#xff08;1,2&#xff09; P152 1.2 数学符号(1,)...

编程日记 2023/8/17 1:50:28

做海外游戏推广有哪些条件？

做海外游戏推广需要充分准备和一系列条件的支持。以下是一些关键条件&#xff1a; 市场调研和策略制定&#xff1a;了解目标市场的文化、玩家偏好、竞争格局等是必要的。根据调研结果制定适合的推广策略。 本地化&#xff1a;将游戏内容、界面、语言、货币等进行本地化&#…...

编程日记 2023/8/17 1:49:27

JavaFx基础学习【五】：FXML布局文件使用

目录 前言 一、介绍 二、简单体验 三、FXML标签元素 四、fx属性介绍 五、重写initialize&#xff08;名字需要保持一致&#xff09;方法 六、Scene Builder快速布局 前言 如果你还没有看过前面的文章&#xff0c;可以通过以下链接快速前往学习&#xff1a; JavaFx基础学…...

编程日记 2023/8/17 1:48:25

通过Python爬虫提升网站搜索排名

目录 怎么使用Python爬虫提升排名 1. 抓取竞争对手数据&#xff1a; 2. 关键词研究&#xff1a; 3. 网页内容优化&#xff1a; 4. 内部链接建设&#xff1a; 5. 外部链接建设&#xff1a; 6. 监测和调整&#xff1a; 需要注意哪些方面 1. 合法性和道德性&#xff1a; …...

编程日记 2023/8/17 1:47:23

【博客698】为什么当linux作为router使用时，安装docker后流量转发失败

为什么当linux作为router使用时&#xff0c;安装docker后流量转发失败 场景 当一台linux机器作为其它服务器的router&#xff0c;负责转发流量的时候&#xff0c;让你在linux上安装docker之后&#xff0c;就会出现流量都被drop掉了 原因 没装docker之前&#xff1a; [root~]…...

编程日记 2023/8/17 1:46:22

el-dialog嵌套,修改内层el-dialog样式(自定义样式)

el-dialog嵌套使用时,内层的el-dialog要添加append-to-body属性 给内层的el-dialog添加custom-class属性,添加自定义类名 <el-dialog:visible.sync"dialogVisible"append-to-bodycustom-class"tree-cesium-container"><span>这是一段信息<…...

编程日记 2023/8/17 1:45:21

B树和B+树区别

B树和B树的区别 B树 B树被称为平衡树&#xff0c;在B树中&#xff0c;一个节点可以有两个以上的子节点。B树的高度为log M N。在B树中&#xff0c;数据按照特定的顺序排序&#xff0c;最小值在左侧&#xff0c;最大值在右侧。 B树是一种平衡的多分树&#xff0c;通常我们说m阶…...

编程日记 2023/8/17 1:44:20

intelJ IDEA\PHPStorm \WebStorm\PyCharm 通过ssh连接远程Mysql\Postgresql等数据库

最容易出错的地方是在general面板下的host&#xff0c;不应该填真实的host地址&#xff0c;而应该填localhost或者127.0.0.1 具体操作步骤见下图...

编程日记 2023/8/17 1:43:18

vfuhyuuy

Sublime Text is an awesome text editor. If you’ve never heard of it, you shouldcheck it out right now. I’ve made this tutorial because there’s no installer for the Linux versions of Sublime Text. While that’s not a real problem, I feel there is a clean…...

编程日记 2023/8/17 1:42:17

CSS自学框架之表单

首先我们看一下表单样式&#xff0c;下面共有5张截图 一、CSS代码 /*表单*/fieldset{border: none;margin-bottom: 2em;}fieldset > *{ margin-bottom: 1em }fieldset:last-child{ margin-bottom: 0 }fieldset legend{ margin: 0 0 1em }/* legend标签是CSS中用于定义…...

编程日记 2023/8/17 1:41:15

使用Spring Boot和Redis实现用户IP接口限流的详细指南

系列文章目录 文章目录 系列文章目录前言一、准备工作二、编写限流过滤器三、配置Redis四、测试接口限流总结 前言 在高并发场景下&#xff0c;为了保护系统免受恶意请求的影响&#xff0c;接口限流是一项重要的安全措施。本文将介绍如何使用Spring Boot和Redis来实现用户IP的…...

编程日记 2023/8/17 1:40:14

前端性能优化——包体积压缩插件，打包速度提升插件，提升浏览器响应的速率模式

前端代码优化 –其他的优化可以具体在网上搜索 压缩项目打包后的体积大小、提升打包速度&#xff0c;是前端性能优化中非常重要的环节&#xff0c;结合工作中的实践总结&#xff0c;梳理出一些 常规且有效 的性能优化建议 ue 项目可以通过添加–report命令&#xff1a; "…...

编程日记 2023/8/17 1:39:10

配置vscode

配置vscode 设置相关 网址&#xff1a;https://code.visualstudio.com/ 搜索不要用百度用这个&#xff1a;cn.bing.com 1.安装中文包 Chinese (Simplified) (简体中文) 2.安装 open in browser 3.安装主题 Atom One Dark Theme 4. 安装图标样式 VSCode Great Icons 5.安装 L…...

编程日记 2023/8/17 1:38:09

【Spring】深入理解 Spring 事务及其传播机制

文章目录 一、Spring 事务是什么二、Spring 中事务的实现方法2.1 Spring 编程式事务&#xff08;手动&#xff09;2.1.1 编程式事务的使用演示2.1.2 编程式事务存在的问题 2.2 Spring 声明式事务&#xff08;自动&#xff09;2.2.1 Transactional 作用范围2.2.2 Transactional …...

编程日记 2023/8/17 1:37:05

eclipse常用设置

1、调整编辑页面字体大小 窗口 (Window)- 首选项&#xff08;Preferences&#xff09;- 常规&#xff08;General&#xff09;- 外观 (Appearence)- 颜色与字体 (Colors And Fonts)&#xff0c;在右边的对话框里选择 Java - Java Editor Text Font&#xff0c;点击出现的修改&…...

编程日记 2023/8/17 1:36:04

ajax解析

Ajax&#xff08;Asynchronous JavaScript and XML&#xff09;是一种用于在不重新加载整个页面的情况下与服务器交换数据的技术。它通过异步的方式发送请求和接收响应&#xff0c;能够实现在后台与服务器进行数据交互&#xff0c;然后更新页面的部分内容&#xff0c;从而提升用…...

编程日记 2023/8/17 1:35:03

CSS3:图片边框

简介 图片也可以作为边框&#xff0c;以下是实例演示 注意 实现该效果必须添加border样式&#xff0c;且必须位于border-image-socure之前否则不会生效 实例 <html lang"en"><head><style>p {width: 600px;margin: 200px auto;border: 30px soli…...

编程日记 2023/8/17 1:34:02

Ubuntu 20.04桌面管理器搞乱了？别慌，手把手教你找回原版GNOME桌面（附LightDM/GDM3切换命令）

Ubuntu 20.04桌面环境异常修复指南&#xff1a;从混乱到秩序 系统启动后突然发现熟悉的GNOME桌面消失了&#xff0c;取而代之的是一个陌生的登录界面和错乱的窗口布局——这可能是许多Ubuntu新手在尝试自定义系统时遇到的噩梦。本文将带你深入理解Linux显示管理器的运作机制&am…...

编程新知 2026/5/21 0:58:39

TPU核心引擎的‘血管网络’：用Python建模与可视化理解脉动阵列数据流

TPU核心引擎的‘血管网络’&#xff1a;用Python建模与可视化理解脉动阵列数据流 在AI加速器的世界里&#xff0c;TPU&#xff08;张量处理单元&#xff09;的脉动阵列就像一台精密的机械钟表&#xff0c;每个齿轮的咬合都遵循着严格的时序规律。但与硬件工程师通过RTL语言&qu…...

编程新知 2026/5/21 0:48:32

极为罕见！35米宽小行星近距离掠过地球

【环球时报特约记者 陈山】据美国全国广播公司&#xff08;NBC&#xff09;网站19日报道&#xff0c;一颗直径约50到115英尺&#xff08;1英尺约合0.3米&#xff09;的小行星于18日近距离飞掠地球&#xff0c;成为近年来非常罕见的一幕。小行星从地球附近掠过的概念图。欧洲航天…...

编程新知 2026/5/21 0:28:18

STM32F030硬件I2C避坑指南：Timing值、滤波器配置与NBYTES重加载模式详解

STM32F030硬件I2C避坑指南&#xff1a;Timing值、滤波器配置与NBYTES重加载模式详解 1. 深入理解I2C_Timing寄存器的计算逻辑 许多开发者在使用STM32F030硬件I2C时&#xff0c;往往直接套用CubeMX生成的默认值或网络上的示例代码&#xff0c;却对I2C_Timing寄存器的底层计算原理…...

编程新知 2026/5/20 23:45:01

JavaScript进阶：ES6+特性与异步编程

JavaScript进阶&#xff1a;ES6特性与异步编程 1. 技术分析 1.1 ES6概述 ES6为JavaScript带来了革命性的改进&#xff1a; ES6特性变量声明: let, const箭头函数: () > {}解构赋值: const {a, b} obj类: class语法模块化: import/export异步编程:Promiseasync/awaitGenerat…...

编程新知 2026/5/20 23:25:29

避开PostgreSQL逻辑复制的那些坑：从复制标识（Replica Identity）配置到性能调优指南

PostgreSQL逻辑复制深度优化&#xff1a;从复制标识陷阱到高性能配置实战 在数据库架构设计中&#xff0c;逻辑复制作为PostgreSQL的核心功能之一&#xff0c;为数据分发、高可用和实时分析提供了强大支持。但许多中高级用户在实际部署时&#xff0c;往往会在复制标识配置和性能…...

编程新知 2026/5/20 22:57:18

Linux常用命令合集：从新手到高手的核心操作指南

1. 项目概述&#xff1a;为什么我们需要一个“常用命令合集”&#xff1f;在Linux世界里摸爬滚打十几年&#xff0c;我见过太多新手&#xff0c;也包括一些从其他平台转过来的老手&#xff0c;面对黑漆漆的终端窗口时那种手足无措的茫然。Linux的强大&#xff0c;根植于其命令行…...

编程新知 2026/5/20 22:27:27

智慧工业控制面板工控部件元器件LCD部件检测数据集VOC+YOLO格式365张8类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件)图片数量(jpg文件个数)&#xff1a;365标注数量(xml文件个数)&#xff1a;365标注数量(txt文件个数)&#xff1a;365标注类别数&…...

编程新知 2026/5/20 22:23:07

智慧工业轮胎X光图像金属与结构缺陷检测数据集VOC+YOLO格式896张11类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件)图片数量(jpg文件个数)&#xff1a;896标注数量(xml文件个数)&#xff1a;896标注数量(txt文件个数)&#xff1a;896标注类别数&…...

编程新知 2026/5/20 22:23:06

7天掌握FontForge：免费开源字体编辑器的完整使用指南

7天掌握FontForge&#xff1a;免费开源字体编辑器的完整使用指南 【免费下载链接】fontforge Free (libre) font editor for Windows, Mac OS X and GNULinux 项目地址: https://gitcode.com/gh_mirrors/fo/fontforge 你是否曾梦想设计属于自己的字体&#xff1f;无论是…...

编程新知 2026/5/20 21:33:53