VUE简易购物车程序
目录
效果预览图
完整代码
效果预览图
完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>购物车</title><style>*{margin: 0;padding: 0;}table{width: 700px;border-collapse: collapse;margin: 50px auto;}tr{height: 50px;}th{background: #eee;}td{text-align: center;}</style>
</head>
<body><div id="app"><table border="1"><tr><th><input type="checkbox" v-model="qx" @change="aa" ></th><th>序号</th><th>书名</th><th>单价</th><th>数量</th><th>总价</th><th>操作</th></tr><tr v-for="(item,index) in arr"><td><input type="checkbox" v-model="item.bol" @change="qx2"></td><td>{{index}}</td><td>{{arr[index].name}}</td><td>{{arr[index].dj}}</td><td><button @click="zj(index)">+</button>{{arr[index].num}}<button @click="js(index)">-</button></td><td>{{arr[index].dj*arr[index].num}}</td><td><button @click="sc(index)">删除</button></td></tr><tr><td>总价</td><td colspan="6">{{total}}</td></tr></table></div>
</body>
</html>
<script type="module">
import {createApp} from './js/vue.esm-browser.js';
createApp({data() {return {arr:[{name:'我在精神病院学斩神',dj:'39',num:1, bol:true},{name:'诛仙',dj:'59',num:1, bol:true},{name:'剑来',dj:'39',num:1, bol:true},{name:'雪中悍刀行',dj:'49',num:1, bol:true},{name:'大奉打更人',dj:'59',num:1, bol:true},{name:'完美世界',dj:'49',num:1, bol:true},{name:'仙逆',dj:'29',num:1, bol:true},],qx:true,}},methods: {zj(index){this.arr[index].num+=1},js(index){this.arr[index].num-=1if (this.arr[index].num<1) {this.arr[index].num=1alert('每件商品最少要买一件')}},sc(index){this.arr.splice(index,1)this.qx2()},qx2(){let n = 0this.arr.forEach((item,index)=>{if (item.bol) {n+=1;}})if (n == this.arr.length) {this.qx = true;}else if (n != this.arr.length){this.qx = falseconsole.log(this.qx);}},aa(){if (this.qx==false) {this.arr.forEach((item,index)=>{item.bol = false})}}},computed:{total(){let t = 0;this.arr.forEach((item,index)=>{if(item.bol){t += item.num*item.dj;}});return t;},},watch:{qx(newVal,oldVal){if (newVal) {this.arr.forEach((item,index)=>{item.bol = true})}}}
}).mount('#app')
</script>相关文章：
VUE简易购物车程序
目录 效果预览图 完整代码 效果预览图 完整代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>…...
如何清除redis缓存？
首先进入redis安装目录 当前目录下执行CMD命令（shift 右键 -> 选择 ‘在此处打开Powershell窗口’ ） 执行 redis-cli.exe -h 127.0.0.1 -p 6379flushall...
接收网络包的过程——从硬件网卡解析到IP层
当一些网络包到来触发了中断，内核处理完这些网络包之后，我们可以先进入主动轮询 poll 网卡的方式，主动去接收到来的网络包。如果一直有，就一直处理，等处理告一段落，就返回干其他的事情。当再有下一批网络包…...
正则化与正则剪枝
写在前面：本博客仅作记录学习之用，部分图片来自网络，如需引用请注明出处，同时如有侵犯您的权益，请联系删除！ 文章目录 引言正则化为什么会过拟合拉格朗日与正则化梯度衰减与正则化 应用解决过拟合网络剪枝 …...
Element-Plus 图标自动导入
🚀 作者主页： 有来技术 🔥 开源项目： youlai-mall 🍃 vue3-element-admin 🍃 youlai-boot 🌺 仓库主页： Gitee 💫 Github 💫 GitCode 💖 欢迎点赞…...
关于DCDC电源中的PWM与PFM
在开关电源DCDC中，我们经常会听到PWM模式与PFM模式。 关于，这两种模式，小编在之前的文章中，做过简单的描述。今天就来针对性的就这两种模式展开讲讲。 PWM：脉冲宽度调制，即频率不变，不断调整脉…...
S25FL系列FLASH读写的FPGA实现
文章目录 实现思路具体实现子模块实现top模块 测试Something 实现思路 建议读者先对 S25FL-S 系列 FLASH 进行了解，我之前的博文中有详细介绍。 笔者的芯片具体型号为 S25FL256SAGNFI00，存储容量 256Mb，增强高性能 EHPLC，4KB 与 6…...
一次【自定义编辑器功能脚本】【调用时内存爆仓】事故排查
一 、事故描述 我有一个需求：在工程文件中找得到所有的图片（Texture 2D），然后把WebGL发布打包时的图片压缩规则进行修改。 项目中有图片2千多张，其中2k分辨率的图片上百张，当我右键进行批量处理的时候&…...
【STM32单片机】简易计算器设计
文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用STM32F103C8T6单片机控制器，使用动态数码管模块、矩阵按键、蜂鸣器模块等。 主要功能： 系统运行后，数码管默认显示0，输入对应的操作数进行四则运…...
【详解二叉树】
🌠作者：TheMythWS. 🎇座右铭：不走心的努力都是在敷衍自己，让自己所做的选择，熠熠发光。 目录 树形结构 概念 树的示意图 树的基本术语 树的表示 树的应用 二叉树(重点) 二叉树的定义 二叉树的五…...
【Amazon】在Amazon EKS集群中安装部署最小化KubeSphere容器平台
文章目录 一、准备工作二、部署 KubeSphere三、访问 KubeSphere 控制台四、安装Amazon EBS CSI 驱动程序4.1 集群IAM角色建立并赋予权限4.2 安装 Helm Kubernetes 包管理器4.3 安装Amazon EBS CSI 驱动程序 五、常见问题六、参考链接 一、准备工作 Kubernetes 版本必须为&…...
ubuntu20.04下安装标注工具CVAT
1 安装docker sudo apt-get update sudo apt-get --no-install-recommends install -y apt-transport-https ca-certificates \curl \gnupg-agent \software-properties-commoncurl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - sudo add-apt-r…...
pytest-pytest-html测试报告这样做，学完能涨薪3k
在 pytest 中提供了生成html格式测试报告的插件 pytest-html 安装 安装命令如下： pip install pytest-html使用 我们已经知道执行用例的两种方式，pytest.main()执行和命令行执行，而要使用pytest-html生成报告，只需要在执行时加…...
本地运行“李开复”的零一万物 34B 大模型
这篇文章，我们来聊聊如何本地运行最近争议颇多的，李开复带队的国产大模型：零一万物 34B。 写在前面 零一万物的模型争议有很多，不论是在海外的社交媒体平台，还是在国内的知乎和一种科技媒体上，不论是针对…...
Redis-Redis缓存高可用集群
1、Redis集群方案比较 哨兵模式 在redis3.0以前的版本要实现集群一般是借助哨兵sentinel工具来监控master节点的状态，如果master节点异常，则会做主从切换，将某一台slave作为master，哨兵的配置略微复杂，并且性能和高可…...
Django之admin页面样式定制（Simpleui）
好久不见，各位it朋友们！ 本篇文章我将向各位介绍Django框架中admin后台页面样式定制的一个插件库，名为Simpleui。 一）简介 SimpleUI是一款简单易用的用户界面（UI）库，旨在帮助开发人员快速构建…...
TypeScript 中的type与interface
TypeScript 中的type与interface 对于 TypeScript，有两种定义类型的方法：type与interface。 人们常常想知道该使用哪一种，而答案并不是一刀切的。这确实取决于具体情况。有时，其中一种比另一种更好，但在许多情况下&a…...
【uniapp】uniapp开发小程序定制uni-collapse（折叠面板）
需求 最近在做小程序，有一个类似折叠面板的ui控件，效果大概是这样 代码 因为项目使用的是uniapp，所以打算去找uniapp的扩展组件，果然给我找到了这个叫uni-collapse的组件（链接：uni-collapse）…...
单片机学习7——定时器/计数器编程
#include<reg52.h>unsigned char a, num; sbit LED1 P1^0;void main() {num0;EA1;ET01;//IT00;//设置TMOD的工作模式TMOD0x01;//给定时器装初值，50000,50ms中断20次，就得到1sTH0(65536-50000)/256;TL0(65536-50000)%256;TR01; // 定时器/计数器启…...
OpenWrt Lan口上网设置
LAN口上网设置 连接上openwrt，我用的 倍控N5105，eth0，看到Openwrt的IP是10.0.0.1 在 网络 -> 网口配置 -> 设置好 WAN 口和 LAN 口 初次使用经常重置 openwrt 所以我设置的是 静态IP模式 - 网络 -> 防火墙 -> 常规设置 ->…...
Mermaid在线编辑器：5分钟学会专业图表制作的终极免费工具
Mermaid在线编辑器：5分钟学会专业图表制作的终极免费工具 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-edi…...
ctfileGet：基于Web前端技术的城通网盘直连解析方案
ctfileGet：基于Web前端技术的城通网盘直连解析方案 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet ctfileGet是一个专注于解决城通网盘下载限制的开源工具，通过纯前端JavaScript…...
基于Ardupilot/PX4固件的VTOL垂直起降固定翼飞行特性优化与参数调校
1. VTOL固定翼飞行特性优化基础 VTOL（垂直起降）固定翼无人机结合了多旋翼垂直起降和固定翼长航时的双重优势，成为近年来的热门机型。在Ardupilot/PX4开源飞控生态中，通过合理配置参数可以实现平滑的模态转换和稳定的飞行性能。我们…...
宇树科技冲刺“人形机器人第一股”：出货量全球第一，专利短板却成IPO最大隐忧？
宇树科技冲刺“人形机器人第一股”：出货量全球第一，专利短板却成IPO最大隐忧？成都余行10000项创新清单，助机器人企业构建与出货量匹配的专利护城河2026年3月，宇树科技正式递交科创板IPO招股书，拟募资42.02亿…...
Python 多线程任务调度系统设计
Python多线程任务调度系统设计 在当今高并发的应用场景中，高效的任务调度系统至关重要。Python凭借其简洁的语法和强大的多线程支持，成为开发任务调度系统的理想选择。本文将探讨如何设计一个基于Python的多线程任务调度系统，帮助开发者优化…...
技术书籍写作：结构设计、案例选取与读者定位
技术书籍写作：结构设计、案例选取与读者定位 技术书籍的写作不仅需要扎实的专业知识，还需要清晰的逻辑结构和有效的表达方式。一本优秀的技术书籍能够帮助读者快速掌握核心概念，并通过实际案例加深理解。如何设计合理的结构、选取恰当的案例…...
影墨·今颜新手必看：零基础玩转‘泼墨创作’式AI人像生成
影墨今颜新手必看：零基础玩转‘泼墨创作’式AI人像生成 想用AI生成一张媲美专业摄影的人像大片，但总觉得画面假假的，有种说不出的“塑料感”？试试看，用“泼墨”的方式创作一张照片。 这不是比喻。今天要介绍的「影墨…...
SITS2026推理优化框架全拆解（含TensorRT-LLM v2.7兼容性验证报告）
第一章：SITS2026推理优化框架全貌与技术定位 2026奇点智能技术大会(https://ml-summit.org) SITS2026（Scalable Inference Toolkit for Scalable 2026）是面向大语言模型与多模态推理场景设计的轻量级、可插拔式优化框架，专为低延…...
避开SIwave PDN仿真的第一个坑：手把手教你检查VRM与Sink设置（附阻抗曲线解读）
避开SIwave PDN仿真的第一个坑：手把手教你检查VRM与Sink设置（附阻抗曲线解读） 在高速电路设计中，电源分配网络（PDN）的阻抗特性直接影响着系统的稳定性和信号完整性。许多工程师在使用SIwave进行PDN仿真时&a…...
使用 Nginx 实现负载均衡与反向代理
Nginx作为一款高性能的Web服务器和反向代理工具，凭借其轻量级、高并发的特性，成为现代架构中负载均衡与反向代理的首选方案。无论是应对突发流量，还是提升服务可用性，Nginx都能通过简洁的配置实现高效分发请求。本文将深入探讨其核…...