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

VUE简易购物车程序

news 2026/1/28 6:30:09

目录

效果预览图

完整代码 

效果预览图

完整代码 

<!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>…...

编程日记 2023/11/27 0:22:55

如何清除redis缓存？

首先进入redis安装目录 当前目录下执行CMD命令&#xff08;shift 右键 -> 选择 ‘在此处打开Powershell窗口’ &#xff09; 执行 redis-cli.exe -h 127.0.0.1 -p 6379flushall...

编程日记 2023/11/27 0:21:54

接收网络包的过程——从硬件网卡解析到IP层

当一些网络包到来触发了中断&#xff0c;内核处理完这些网络包之后&#xff0c;我们可以先进入主动轮询 poll 网卡的方式&#xff0c;主动去接收到来的网络包。如果一直有&#xff0c;就一直处理&#xff0c;等处理告一段落&#xff0c;就返回干其他的事情。当再有下一批网络包…...

编程日记 2023/11/27 0:20:53

正则化与正则剪枝

写在前面&#xff1a;本博客仅作记录学习之用&#xff0c;部分图片来自网络&#xff0c;如需引用请注明出处&#xff0c;同时如有侵犯您的权益&#xff0c;请联系删除&#xff01; 文章目录 引言正则化为什么会过拟合拉格朗日与正则化梯度衰减与正则化 应用解决过拟合网络剪枝 …...

编程日记 2023/11/27 0:19:52

Element-Plus 图标自动导入

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…...

编程日记 2023/11/27 0:18:51

关于DCDC电源中的PWM与PFM

在开关电源DCDC中&#xff0c;我们经常会听到PWM模式与PFM模式。 关于&#xff0c;这两种模式&#xff0c;小编在之前的文章中&#xff0c;做过简单的描述。今天就来针对性的就这两种模式展开讲讲。 PWM&#xff1a;脉冲宽度调制&#xff0c;即频率不变&#xff0c;不断调整脉…...

编程日记 2023/11/27 0:17:51

S25FL系列FLASH读写的FPGA实现

文章目录 实现思路具体实现子模块实现top模块 测试Something 实现思路 建议读者先对 S25FL-S 系列 FLASH 进行了解&#xff0c;我之前的博文中有详细介绍。 笔者的芯片具体型号为 S25FL256SAGNFI00&#xff0c;存储容量 256Mb&#xff0c;增强高性能 EHPLC&#xff0c;4KB 与 6…...

编程日记 2023/11/27 0:16:49

一次【自定义编辑器功能脚本】【调用时内存爆仓】事故排查

一 、事故描述 我有一个需求&#xff1a;在工程文件中找得到所有的图片&#xff08;Texture 2D&#xff09;&#xff0c;然后把WebGL发布打包时的图片压缩规则进行修改。 项目中有图片2千多张&#xff0c;其中2k分辨率的图片上百张&#xff0c;当我右键进行批量处理的时候&…...

编程日记 2023/11/27 0:15:48

【STM32单片机】简易计算器设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用STM32F103C8T6单片机控制器&#xff0c;使用动态数码管模块、矩阵按键、蜂鸣器模块等。 主要功能&#xff1a; 系统运行后&#xff0c;数码管默认显示0&#xff0c;输入对应的操作数进行四则运…...

编程日记 2023/11/27 0:14:47

【详解二叉树】

&#x1f320;作者&#xff1a;TheMythWS. &#x1f387;座右铭&#xff1a;不走心的努力都是在敷衍自己&#xff0c;让自己所做的选择&#xff0c;熠熠发光。 目录 树形结构 概念 树的示意图 树的基本术语 树的表示 树的应用 二叉树(重点) 二叉树的定义 二叉树的五…...

编程日记 2023/11/27 0:13:45

【Amazon】在Amazon EKS集群中安装部署最小化KubeSphere容器平台

文章目录 一、准备工作二、部署 KubeSphere三、访问 KubeSphere 控制台四、安装Amazon EBS CSI 驱动程序4.1 集群IAM角色建立并赋予权限4.2 安装 Helm Kubernetes 包管理器4.3 安装Amazon EBS CSI 驱动程序 五、常见问题六、参考链接 一、准备工作 Kubernetes 版本必须为&…...

编程日记 2023/11/27 0:12:44

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…...

编程日记 2023/11/27 0:11:43

pytest-pytest-html测试报告这样做，学完能涨薪3k

在 pytest 中提供了生成html格式测试报告的插件 pytest-html 安装 安装命令如下&#xff1a; pip install pytest-html使用 我们已经知道执行用例的两种方式&#xff0c;pytest.main()执行和命令行执行&#xff0c;而要使用pytest-html生成报告&#xff0c;只需要在执行时加…...

编程日记 2023/11/27 0:08:38

本地运行“李开复”的零一万物 34B 大模型

这篇文章&#xff0c;我们来聊聊如何本地运行最近争议颇多的&#xff0c;李开复带队的国产大模型&#xff1a;零一万物 34B。 写在前面 零一万物的模型争议有很多&#xff0c;不论是在海外的社交媒体平台&#xff0c;还是在国内的知乎和一种科技媒体上&#xff0c;不论是针对…...

编程日记 2023/11/27 0:07:37

Redis-Redis缓存高可用集群

1、Redis集群方案比较 哨兵模式 在redis3.0以前的版本要实现集群一般是借助哨兵sentinel工具来监控master节点的状态&#xff0c;如果master节点异常&#xff0c;则会做主从切换&#xff0c;将某一台slave作为master&#xff0c;哨兵的配置略微复杂&#xff0c;并且性能和高可…...

编程日记 2023/11/27 0:06:37

Django之admin页面样式定制（Simpleui）

好久不见&#xff0c;各位it朋友们&#xff01; 本篇文章我将向各位介绍Django框架中admin后台页面样式定制的一个插件库&#xff0c;名为Simpleui。 一&#xff09;简介 SimpleUI是一款简单易用的用户界面&#xff08;UI&#xff09;库&#xff0c;旨在帮助开发人员快速构建…...

编程日记 2023/11/27 0:05:36

TypeScript 中的type与interface

TypeScript 中的type与interface 对于 TypeScript&#xff0c;有两种定义类型的方法&#xff1a;type与interface。 人们常常想知道该使用哪一种&#xff0c;而答案并不是一刀切的。这确实取决于具体情况。有时&#xff0c;其中一种比另一种更好&#xff0c;但在许多情况下&a…...

编程日记 2023/11/27 0:03:33

【uniapp】uniapp开发小程序定制uni-collapse（折叠面板）

需求 最近在做小程序&#xff0c;有一个类似折叠面板的ui控件&#xff0c;效果大概是这样 代码 因为项目使用的是uniapp&#xff0c;所以打算去找uniapp的扩展组件&#xff0c;果然给我找到了这个叫uni-collapse的组件&#xff08;链接&#xff1a;uni-collapse&#xff09…...

编程日记 2023/11/27 0:02:32

单片机学习7——定时器/计数器编程

#include<reg52.h>unsigned char a, num; sbit LED1 P1^0;void main() {num0;EA1;ET01;//IT00;//设置TMOD的工作模式TMOD0x01;//给定时器装初值&#xff0c;50000,50ms中断20次&#xff0c;就得到1sTH0(65536-50000)/256;TL0(65536-50000)%256;TR01; // 定时器/计数器启…...

编程日记 2023/11/27 0:01:31

OpenWrt Lan口上网设置

LAN口上网设置 连接上openwrt&#xff0c;我用的 倍控N5105&#xff0c;eth0&#xff0c;看到Openwrt的IP是10.0.0.1 在 网络 -> 网口配置 -> 设置好 WAN 口和 LAN 口 初次使用经常重置 openwrt 所以我设置的是 静态IP模式 - 网络 -> 防火墙 -> 常规设置 ->…...

编程日记 2023/11/27 0:00:31

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2026/1/22 8:28:23

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2026/1/22 8:15:00

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2026/1/26 21:56:38

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2026/1/26 9:51:16

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2026/1/27 1:41:23

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2026/1/15 4:57:50

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2026/1/18 20:51:07

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2026/1/27 4:58:14