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><style type="text/css">table {width: 500px;text-align: center;border-collapse: collapse;}table,th,td {border: 3px double black;}input{width: 120px;}</style><script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
</head><body><div id="falsebody"><table id="tableBox" cellspacing="0" cellpadding="9"><tr><td>名称</td><td>价格</td><td>数量</td><td>操作</td></tr><tbody><tr v-for="(item,index) in goods" @click="changeColor(index)":style="{backgroundColor: k != index ? '' : '#0078D4'}"><td>{{item.name}}</td><td>￥{{item.price}}</td><td><button type="button" @click="redruce(index)">-</button>{{item.num}}<button type="button" @click="plus(index)">+</button></td><td><button type="button" @click="editBlock(item,index)">编辑</button><button type="button" @click="del(index)">删除</button></td></tr></tbody><tfoot><tr><td></td><td>总价:￥{{allPrice}}</td><td>总数量:{{allNum}}</td><td></td></tr></tfoot></table><button type="button" @click="addBlock()">添加商品</button><div v-show="addShow"><input v-model="name" type="text" name="" value="" placeholder="名称" /> <input v-model="price" type="number" name="" value="" placeholder="价格" /> <input v-model="num" type="number" name="" value="" placeholder="数量" /> <button type="button" @click="addSure()">确定</button> <button type="button" @click="addCancel()">取消</button></div><div v-show="editShow"><input v-model="editname" type="text" name="" /> <input v-model="editprice" type="number" name="" /> <input v-model="editnum" type="number" name="" /> <button type="button" @click="editSure()">确定</button> <button type="button" @click="editCancel()">取消</button></div></div><script>let { createApp, ref, reactive } = Vue;createApp({setup() {//假数据const goods = ref([{"name": "衣服","price": 39,"num": 1},{"name": "鞋子","price": 69,"num": 1}])//减少商品数量function redruce(i) {goods.value[i].num--;// 不能减到负数if (goods.value[i].num <= 0) {goods.value[i].num = 0;}calculation();}//增加商品数量function plus(i) {goods.value[i].num++;calculation();};// 声明一个变量计算总价let allPrice = ref(0);// 声明一个变量计算总数量let allNum = ref(0);calculation();//计算总价格和总数量function calculation() {allPrice.value = 0;allNum.value = 0;for (let i in goods.value) {allPrice.value += goods.value[i].num * goods.value[i].price;allNum.value += goods.value[i].num;};};// 默认隐藏添加输入框let addShow = ref(false);// v-model添加 获取输入框输入的新数据let name = ref('');let price = ref('');let num = ref('');//点击添加function addBlock() {name.value = '';price.value = '';num.value = '';addShow.value = true;};//点击确定添加function addSure() {// 判断不为空if (name.value != '' && price.value != '' && num.value != '') {// 添加的新数据let newData = {name: name.value,price: price.value,num: num.value};goods.value.push(newData);addShow.value = false;calculation();};};//点击取消添加function addCancel() {name.value = '';price.value = '';num.value = '';addShow.value = false;};// v-model编辑 更改元数据let editname = ref('');let editprice = ref('');let editnum = ref('');//编辑的默认数据let defaultData = reactive({editname: '',editprice: '',editnum: ''});//默认隐藏编辑输入框let editShow = ref(false);let index;// 接收点击编辑时传的下标//点击编辑按钮function editBlock(item, i) {Object.assign(defaultData, item);editname.value = item.name;editprice.value = item.price;editnum.value = item.num;index = i;editShow.value = true;};//点击确定编辑function editSure() {goods.value[index].name = editname.value;goods.value[index].price = editprice.value;goods.value[index].num = editnum.value;calculation();editShow.value = false;};//点击取消编辑function editCancel() {editShow.value = false;};//点击删除function del(i) {goods.value.splice(i, 1);editShow.value = false;calculation();};//点击商品操作时改变背景颜色let k = ref();//点击换色function changeColor(i) {k.value = i;};return {goods,allNum,allPrice,redruce,plus,name,num,price,addShow,addBlock,addSure,addCancel,editShow,defaultData,editname,editprice,editnum,editBlock,editSure,editCancel,del,k,changeColor}}}).mount('#falsebody');</script>
</body></html>相关文章：
VUE实现简易购物车
主要是对基础的指令的使用，直接上代码： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">&l…...
混沌工程——从捣乱的视角看系统稳定性
概念 混沌工程是通过捣乱实验探究系统稳定性的实践过程，其作战武器是风险因子，即在健康的运行环境中引入风险变量来验证系统对风险的抵抗能力，它的作用是推动系统容错能力建设、验证监控告警及时性、提升研发问题排查能力。 混沌工程的工作…...
Windows宝塔面板部署ThinkPHP8.0创建Vue项目案例
安装ThinkPHP8.0 登录宝塔面板，创建一个站点。 输入composer代码，执行完成后自动创建TP目录 composer create-project topthink/think tp 网站目录设置为tp，运行目录设置为public 设置PHP版本为8.0以上，不然会出现下面的报错代…...
5G频段简介
5G频段 5G网络一共有29个频段，主要被分为两个频谱范围，其中6GHz以下的频段共有26个（统称为Sub6GHz），毫米波频段有3个。目前国内主要使用的是Sub6GHz，包括n1/n3/n28/n41/n77/n78/n79共7个频段。具体介绍如下…...
【python学习】bytearray 数组
在Python中，bytearray 是一个可变序列，用于表示一个字节数组。与不可变的 bytes 类型相比，bytearray 允许你修改其内容。你可以通过索引来访问和修改 bytearray 中的元素，也可以添加或删除元素。 使用 bytearray 的一些示例&…...
Labview_Occurrencel(事件发生)
PS：这里遇到 一个很Low的事情： 在停止第二个while循环的时候出现了停止不了的情况。因为等待事件发生设置的超时时间为:-1。所以等事件发生后出现了条件接线端已经执行的情况，所以当下次事件发生时未能及时停止。初版的停止设置如下图&#x…...
天气网站爬虫及可视化
摘要：随着互联网的快速发展，人们对天气信息的需求也越来越高。本论文基于Python语言，设计并实现了一个天气网站爬虫及可视化系统。该系统通过网络爬虫技术从多个天气网站上获取实时的天气数据，并将数据进行清洗和存储。同时&#…...
【python - 数据】
一、序列 序列（sequence）是一组有顺序的值的集合，是计算机科学中的一个强大且基本的抽象概念。序列并不是特定内置类型或抽象数据表示的实例，而是一个包含不同类型数据间共享行为的集合。也就是说，序列有很多种类&…...
几种热管的构造
1、超薄热管构造形式 在实际应用中，超薄热管通常定义为厚度小于2.0mm的平板热管。超薄热管很薄，可紧贴电子元件表面散热，故被广泛应用于移动和可携带电子设备，如智能手机、笔记本电脑和智能手表。用于笔记本电脑和平板电脑的超薄…...
【GitOps】使用Google工具JIB实现本地无需安装容器推送镜像，加速SpringCloud项目开发
文章目录 一、效果展示二、简介三、安装Jib插件1、区分环境2、安装插件一、效果展示 本地是window系统，无docker环境，没有任何runtime，使用jib工具打包镜像并推送完成，用时20秒 二、简介 Jib 是 Google 开发的一款开源工具，旨在帮助 Java 开发者更高效地将 Java 应用程…...
【proteus经典实战】16X192点阵程序
一、简介 6X192点阵程序通常用于表示高分辨率图像或文字，其中16X表示像素阵列的宽度，192表示每个像素阵列中的点阵数，16X192点阵程序需要一定的编程知识和技能才能编写和调试，同时还需要考虑硬件设备的兼容性和性能等因素。 初始…...
小白上手AIGC-基于FC部署stable-diffusion
AIGC AIGC（人工智能创造内容）作为一种基于人工智能技术生成内容的新型创作模式。打破了过去大家对于AI的理解都是说只能涉足部分领域而无法涉足艺术或者是其他的创作领域的定律，现在的AIGC也能够创作内容了，而不再只是单纯的返回…...
一些指标的学习
1.平均倒数排名（MRR） 1.定义 MRR 是衡量检索系统返回的结果列表中第一个相关结果位置的指标。具体来说，它是所有查询倒数排名的平均值。 2.计算步骤 对每个查询，找到第一个正确答案在结果列表中的排名 𝑅ᵄ…...
dledger原理源码分析系列(三)-选主
简介 dledger是openmessaging的一个组件， raft算法实现，用于分布式日志，本系列分析dledger如何实现raft概念，以及dledger在rocketmq的应用 本系列使用dledger v0.40 本文分析dledger的选主 关键词 Raft Openmessaging 心跳/选…...
如何修改PDF文档的作者名称？
要修改一个 PDF 文档的作者名称，你可以按照以下步骤进行操作： 1. **使用 Adobe Acrobat**（如果有）： - Adobe Acrobat 是一个功能强大的 PDF 编辑工具，支持修改文档属性信息，包括作者名称。打开…...
从笔灵到AI去痕：全方位提升内容创作与学术诚信
内容为王，在内容创作的世界中尤为重要。然而，面对写作时常常感到无从下手：有时缺乏灵感，有时难以表达清楚自己的想法。AI写作助手的出现，为这些问题提供了创新的解决方案，极大地改变了内容创作的过程。 今…...
考试如果出现汉诺塔问题怎么办？
对于这道题来说 就按照测试案例里的数字进行输入 测试案例用100 那这三只鸡的具体最多能有多少只鸡呢？ 用总数除以这只鸡的单价>>>>>>>即为这只鸡最多有 >>>>>>>> n / 单价 修改后 >>>>> 不只适…...
导出word模板开发记录
exportWordDocx.js import JSZipUtils from “jszip-utils” import Docxtemplater from “docxtemplater” import {saveAs} from “file-saver” import PizZip from “pizzip” const exportWordDocx (demoUrl, docxData, fileName) > {// 读取并获得模板文件的二进制…...
PHP爬虫类的并发与多线程处理技巧
PHP爬虫类的并发与多线程处理技巧 引言： 随着互联网的快速发展，大量的数据信息存储在各种网站上，获取这些数据已经成为很多业务场景下的需求。而爬虫作为一种自动化获取网络信息的工具，被广泛应用于数据采集、搜索引擎、舆情分析…...
用Python将PowerPoint演示文稿转换到图片和SVG
PowerPoint演示文稿作为展示创意、分享知识和表达观点的重要工具，被广泛应用于教育、商务汇报及个人项目展示等领域。然而，面对不同的分享场景与接收者需求，有时需要我们将PPT内容以图片形式保存与传播。这样能够避免软件兼容性的限制&#x…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。 不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1） にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために ＆ ように（３）そう（４）にする3、…...
Spring Boot 实现流式响应（兼容 2.7.x）
在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
零基础设计模式——行为型模式 - 责任链模式
第四部分：行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习！行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想：使多个对象都有机会处…...
微信小程序云开发平台MySQL的连接方式
注：微信小程序云开发平台指的是腾讯云开发 先给结论：微信小程序云开发平台的MySQL，无法通过获取数据库连接信息的方式进行连接，连接只能通过云开发的SDK连接，具体要参考官方文档： 为什么？ 因为…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域，向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能，能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作，并通过具体…...
AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机，因为在使用过程中发现 Airsim 对外部监控相机的描述模糊，而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置，最后在源码示例中找到了，所以感…...
【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制
目录 节点的功能承载层（GATT/Adv）局限性： 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能，如 Configuration …...
华为OD机试-最短木板长度-二分法(A卷,100分)
此题是一个最大化最小值的典型例题， 因为搜索范围是有界的，上界最大木板长度补充的全部木料长度，下界最小木板长度； 即left0,right10^6; 我们可以设置一个候选值x(mid)，将木板的长度全部都补充到x，如果成功…...