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

VUE简易购物车程序

news 2025/9/10 12:35:26

目录

效果预览图

完整代码 

效果预览图

完整代码 

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

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2025/9/1 18:25:23

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/8/4 15:02:27

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/6/27 0:59:29

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/6/21 15:38:27

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/7/17 1:57:52

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2025/9/2 19:02:02

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

编程新知 2025/9/7 8:49:59

Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

编程新知 2025/9/3 21:29:46

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日&#xff0c;在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上&#xff0c;可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞&#xff0c;强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...

编程新知 2025/9/7 8:46:45

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...

编程新知 2025/8/23 1:07:32