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

Diary26-Vue综合案例1-书籍购物车

news 2026/3/28 6:07:58

Vue综合案例1-书籍购物车

案例要求:

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./style.css">
</head>
<body><div id="app"></div>
​<template id="my-app"><template v-if="books.length > 0"><table><thead><th>序号</th><th>书籍名称</th><th>出版日期</th><th>价格</th><th>购买数量</th><th>操作</th></thead><tbody><tr v-for="(book, index) in books"><td>{{index + 1}}</td><td>{{book.name}}</td><td>{{book.date}}</td><td>{{formatPrice(book.price)}}</td><td><button :disabled="book.count <= 1" @click="decrement(index)">-</button><span class="counter">{{book.count}}</span><button @click="increment(index)">+</button></td><td><button @click="removeBook(index)">移除</button></td></tr></tbody></table><h2>总价格: {{formatPrice(totalPrice)}}</h2></template><template v-else><h2>购物车为空~</h2></template></template>
​<script src="../js/vue.js"></script><script src="./index.js"></script>
​
</body>
</html>
Vue.createApp({template: "#my-app",data() {return {books: [{id: 1,name: '《算法导论》',date: '2006-9',price: 85.00,count: 1},{id: 2,name: '《UNIX编程艺术》',date: '2006-2',price: 59.00,count: 1},{id: 3,name: '《编程珠玑》',date: '2008-10',price: 39.00,count: 1},{id: 4,name: '《代码大全》',date: '2006-3',price: 128.00,count: 1},]}},computed: {// vue2: filter/map/reducetotalPrice() {let finalPrice = 0;for (let book of this.books) {finalPrice += book.count * book.price;}return finalPrice;},// Vue3不支持过滤器了, 推荐两种做法: 使用计算属性/使用全局的方法filterBooks() {return this.books.map(item => {const newItem = Object.assign({}, item);newItem.price = "¥" + item.price;return newItem;})}},methods: {increment(index) {// 通过索引值获取到对象this.books[index].count++},decrement(index) {this.books[index].count--},removeBook(index) {this.books.splice(index, 1);},formatPrice(price) {return "¥" + price;}}
}).mount("#app");
table {border: 1px solid #e9e9e9;border-collapse: collapse;border-spacing: 0;
}
​
th, td {padding: 8px 16px;border: 1px solid #e9e9e9;text-align: left;
}
​
th {background-color: #f7f7f7;color: #5c6b77;font-weight: 600;
}
​
.counter {margin: 0 5px;
}

代码解析：

  1. 创建button按钮，当执行减少选择图书的操作时，在index.js文件中调用decrement(index)函数，当book.count <= 1（即所选书本个数小于等于1时）执行布尔判断，为ture则button按钮不可被点击，为false则可以点击；当执行增加选择图书的操作时，在index.js文件中调用increment(index)函数

<td><button :disabled="book.count <= 1" @click="decrement(index)">-</button><span class="counter">{{book.count}}</span><button @click="increment(index)">+</button>
</td>

  1. this.books.splice(index, 1);这句代码的含义是从index项开始索引，1表示从当前索引项开始（包含该索引项）向下索引个数

<td><button @click="removeBook(index)">移除</button>
</td>
removeBook(index) {this.books.splice(index, 1);
},

  1. 这段代码表示如果有选中图书，则进行app操作；若全部移除图书之后，则在页面上显示购物车为空~

<template v-if="books.length > 0"></template>
<template v-else><h2>购物车为空~</h2>
</template>

  1. 这段代码计算图书总金额，注意computed:的使用

computed: {totalPrice() {let finalPrice = 0;for (let book of this.books) {finalPrice += book.count * book.price;}return finalPrice;},

  1. 这段CSS代码表示含义为给button按钮左右间距5px

.counter {margin: 0 5px;
}

相关文章：

Diary26-Vue综合案例1-书籍购物车

Vue综合案例1-书籍购物车 案例要求: 代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewpor…...

编程日记 2023/12/21 20:21:22

【EasyExcel实践】万能导出，一个接口导出多张表以及任意字段（可指定字段顺序）-简化升级版

文章目录 前言正文一、项目简介二、核心代码2.1 pom.xml 依赖配置2.2 ExcelHeadMapFactory2.3 ExcelDataLinkedHashMap2.4 自定义注解 ExcelExportBean2.5 自定义注解 ExcelColumnTitle2.6 建造器接口 Builder2.7 表格工具类 ExcelUtils2.8 GsonUtil2.9 模版类 ExportDynamicCo…...

编程日记 2023/12/21 20:20:21

解决 Hive 外部表分隔符问题的实用指南

简介&#xff1a; 在使用 Hive 外部表时&#xff0c;分隔符设置不当可能导致数据导入和查询过程中的问题。本文将详细介绍如何解决在 Hive 外部表中正确设置分隔符的步骤。 问题描述&#xff1a; 在使用Hive外部表时&#xff0c;可能会遇到分隔符问题。这主要是因为Hive在读…...

编程日记 2023/12/21 20:19:20

一文学会 Apache Zeppelin

Zeppelin资料 Zeppelin项目信息 Zeppelin官网 http://zeppelin.apache.org/Zeppelin源码地址 https://github.com/apache/zeppelinZeppelin JIRA： https://issues.apache.org/jira/projects/ZEPPELIN/summaryZeppelin文档 Flink on Zeppelin 文档集中地 https://www.yuque.co…...

编程日记 2023/12/21 20:16:18

ROS学习笔记(七)---参数服务器

ROS学习笔记文章目录 01. ROS学习笔记(一)—Linux安装VScode 02. ROS学习笔记(二)—使用 VScode 开发 ROS 的Python程序&#xff08;简例&#xff09; 03. ROS学习笔记(三)—好用的终端Terminator 04. ROS学习笔记(四)—使用 VScode 启动launch文件运行多个节点 05. ROS学习笔…...

编程日记 2023/12/21 20:15:17

【RTOS学习】源码分析(信号量和互斥量 事件组 任务通知)

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《RTOS学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 目录 &#x1f353;信号量和互斥量&#x1f345;创建&#x1f345;Take&#x1f345;Give &#x…...

编程日记 2023/12/21 20:11:14

1316：【例4.6】数的计数(Noip2001) 代码+解析

1316&#xff1a;【例4.6】数的计数(Noip2001) 【题目描述】 我们要求找出具有下列性质数的个数&#xff08;包括输入的自然数n &#xff09;。先输入一个自然数n(n≤1000)&#xff0c;然后对此自然数按照如下方法进行处理&#xff1a;不作任何处理&#xff1b;在它的左边加上一…...

编程日记 2023/12/21 20:09:13

征集倒计时 | 2023年卓越影响力榜单-第四届中国产业创新奖报名即将截止

第四届「ISIG中国产业智能大会」将于2024年3月16日在上海举办。2024 ISIG 以“与科技共赢&#xff0c;与产业共进”为主题&#xff0c;共设立RPA超自动化、 低代码、AIGC大模型、流程挖掘四大主题峰会。届时&#xff0c;大会组委会将颁发2023年度卓越影响力榜单—第四届中国产业…...

编程日记 2023/12/21 20:08:12

vue的语法模板与数据绑定的说明

vue的两大模板语法&#xff1a; 1.插值语法 2.指定语法 插值语法&#xff1a;{{}} 功能&#xff1a;用于解析标签体的内容 写法&#xff1a;{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性 指定语法&#xff1a; 功能:用于解析标签(包括:标签属性、标…...

编程日记 2023/12/21 20:07:11

VueCron使用方法

1&#xff09;什么是vueCron Vue Cron 是基于 Vue.js 的定时任务管理组件&#xff0c;它提供了一种简单易用的方式来设定和管理定时任务。Vue Cron 提供了一个类似于 Linux crontab 的界面&#xff0c;用户可以通过它来创建、编辑和删除定时任务。 2&#xff09;安装依赖及应…...

编程日记 2023/12/21 20:06:10

SpringBlade export-user SQL 注入漏洞复现

0x01 产品简介 SpringBlade 是一个由商业级项目升级优化而来的 SpringCloud 分布式微服务架构、SpringBoot 单体式微服务架构并存的综合型项目。 0x02 漏洞概述 SpringBlade v3.2.0 及之前版本框架后台 export-user 路径存在安全漏洞，攻击者利用该漏洞可通过组件customSqlS…...

编程日记 2023/12/21 20:04:08

结构体的一些补充知识

1、结构体后面分号前面的名字是什么意思。 在C中&#xff0c;结构体的定义格式为&#xff1a; struct <结构体名> {// 成员变量和成员函数 };在这个定义中&#xff0c;<结构体名>就是结构体的名称&#xff0c;而这个名称位于结构体定义的末尾&#xff0c;分号之前…...

编程日记 2023/12/21 20:02:06

20V升26V 600mA升压型LED驱动芯片，PWM调光芯片-AH1160

AH1160是一个功能强大的升压型LED驱动芯片&#xff0c;专为需要精确控制LED亮度的PWM调光应用而设计。它可将20V输入电压升压至26V&#xff0c;同时提供稳定的600mA电流输出&#xff0c;适用于各种LED照明设备。 芯片特点&#xff1a; 1. 输入电压范围&#xff1a;AH1160可在…...

编程日记 2023/12/21 20:01:05

如何在Go中制作HTTP服务器

引言 许多开发人员至少会花一些时间创建服务器，以便在互联网上分发内容。HTTP (Hypertext Transfer Protocol，超文本传输协议)提供了大部分这些内容，无论是请求一张猫的图片还是请求加载你正在阅读的教程。Go标准库为创建HTTP服务器以提供web内容或向这些服务器发出HTTP请求…...

编程日记 2023/12/21 19:58:03

Linux笔记---系统信息

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Linux学习 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 命令 1. uname - 显示系统信息 2. hostname - 显示或设置系统主机名 3. top - 显示系统资源使用情况 4. df - 显示磁盘空间使用情…...

编程日记 2023/12/21 19:56:01

最新版android stuido加上namespace

每个 Android 模块都有一个命名空间&#xff0c;此命名空间用作其生成的 命名空间由模块的 build.gradle 文件中的 namespace 属性定义&#xff0c;如以下代码段所示。namespace 最初会设为您在创建项目时选择的软件包名称。 Kotlin Groovy android {namespace "com.ex…...

编程日记 2023/12/21 19:55:00

Wireshark基础及捕获技巧

第一章&#xff1a;Wireshark基础及捕获技巧 1.1 Wireshark基础知识回顾 1.2 高级捕获技巧&#xff1a;过滤器和捕获选项 1.3 Wireshark与其他抓包工具的比较 第二章&#xff1a;网络协议分析 2.1 网络协议分析&#xff1a;TCP、UDP、ICMP等 2.2 高级协议分析&#xff1a;HTTP…...

编程日记 2023/12/21 19:53:58

Windows下Navicat15.0连接Oracle11g报ORA-28547解决

目录 背景 一、相关环境 1、操作系统 2、Navicat版本 3、ORACLE连接 4、默认连接 二、问题分析 1、默认dll配置 三、修改配置 1、下载匹配的client 2、替换相应目录 总结 背景 最近在项目中需要使用Oracle数据库&#xff0c;当前很多应用系统的数据都存储在MySQL或者Pos…...

编程日记 2023/12/21 19:50:55

21 Vue3中使用v-for遍历对象数组

概述 使用v-for遍历对象数组在真实的开发中也属于非常常见的用法&#xff0c;需要重点掌握。 因为目前流行的是前后端分离开发&#xff0c;在前后端分离开发中&#xff0c;最常需要处理的就是对象数组类型的数据了。 比如&#xff0c;将员工信息渲染到表格中。 这节课我们就…...

编程日记 2023/12/21 19:48:53

深入理解Java自定义异常与全局异常处理 @RestControllerAdvice

异常主要是包括编译时的异常和运行时的异常。编译时的异常可以通过捕获异常获取&#xff0c;运行时候的异常主要是通过代码规范&#xff0c;或者测试。 Spring Boot提供了两种异常处理方式来统一处理和维护异常信息。 第一种方式是使用RestControllerAdvice注解与ExceptionHand…...

编程日记 2023/12/21 19:42:48

Xilinx Video IP实战：如何将HDMI输入转换为AXI4-Stream（附仿真+上板测试）

Xilinx Video IP实战&#xff1a;HDMI转AXI4-Stream全流程开发指南 在FPGA视频处理系统中&#xff0c;将HDMI等视频输入接口转换为标准化的AXI4-Stream协议是构建复杂视频处理流水线的关键第一步。不同于简单的接口转换&#xff0c;这一过程涉及视频时序解析、数据位宽适配、时…...

编程新知 2026/3/28 4:42:02

MacOS极简部署OpenClaw：GLM-4.7-Flash模型联调与安全防护

MacOS极简部署OpenClaw&#xff1a;GLM-4.7-Flash模型联调与安全防护 1. 为什么选择OpenClawGLM-4.7-Flash组合 去年冬天&#xff0c;当我第一次尝试用Python脚本批量处理公司周报时&#xff0c;发现传统自动化工具对非结构化数据的处理能力非常有限。直到遇见OpenClaw这个能…...

编程新知 2026/3/28 4:42:02

Linux性能调优实战：CPU与内存优化指南

Linux 性能调优实战指南1. 性能优化基础概念1.1 性能指标Linux性能优化的两个核心指标是吞吐量和延迟。从应用负载角度看&#xff0c;直接影响终端用户体验&#xff1b;从系统资源角度看&#xff0c;关注资源使用率和饱和度。性能问题的本质是系统资源已达瓶颈但请求处理不够快…...

编程新知 2026/3/28 3:37:36

RK3588开发板跑YOLOv5视频流demo，遇到Segmentation fault别慌！保姆级core文件生成与调试指南

RK3588开发板YOLOv5视频流推理崩溃排查&#xff1a;从Segmentation fault到精准调试全攻略 当你在RK3588开发板上满心期待地运行YOLOv5视频流推理demo时&#xff0c;屏幕上突然闪现的"Segmentation fault (core dumped)"就像一盆冷水浇灭了热情。这种崩溃提示信息量极…...

编程新知 2026/3/28 3:09:13

Bitahub算力上新 RTX3080 10G重磅登场

针对当前 AI 开发与科研场景中算力成本高、配置复杂的痛点&#xff0c;Bitahub 平台推出了 RTX3080 10G 显卡算力服务。该显卡具备 10GB 显存&#xff0c;能够满足模型训练、推理等多场景算力需求&#xff0c;同时平台定价极具竞争力&#xff1a;单卡低至 0.82 元 / 小时&#…...

编程新知 2026/3/28 2:51:10

亚马逊爆款选品：数据采集与三方服务商对接

一、核心选品数据采集渠道1. 官方免费数据源&#xff08;合规权威&#xff09;BSR畅销榜&#xff1a;查看类目热销品&#xff0c;定位头部爆款。新品榜&#xff1a;挖掘增速快、潜力大的新品。商机探测器&#xff1a;卖家后台直达&#xff0c;获取高搜索量、低竞争蓝海词。品牌…...

编程新知 2026/3/28 0:37:28

从人工到智能：SubtitleOCR如何实现硬字幕提取的效率革命

从人工到智能&#xff1a;SubtitleOCR如何实现硬字幕提取的效率革命 【免费下载链接】SubtitleOCR 快如闪电的硬字幕提取工具。仅需苹果M1芯片或英伟达3060显卡即可达到10倍速提取。A very fast tool for video hardcode subtitle extraction 项目地址: https://gitcode.com/…...

编程新知 2026/3/28 0:25:26

2026年03月27日全球AI前沿动态

一句话总结AI领域覆盖通用/垂直大模型、智能体应用、物理机器人、硬件算力、企业战略、产品更新、投融资、行业观点、民生教育、研究资源全维度&#xff0c;国产技术密集突破、智能体全面落地、硬件自研提速、安全风险频发、老年AI教育落地&#xff0c;行业向实用化、国产化、安…...

编程新知 2026/3/27 22:20:10

医学图像分类实战：基于kvasir v2胃病数据集的深度卷积网络性能对比

1. 医学图像分类与KVASIR V2数据集简介 胃镜图像分类是计算机辅助诊断系统中的关键环节。KVASIR V2作为目前最全面的公开胃病数据集&#xff0c;包含8类常见胃部病变的8000张高清图像&#xff0c;每类1000张。这些图像由专业胃肠病专家标注&#xff0c;覆盖了从正常黏膜到早期…...

编程新知 2026/3/27 21:47:58

遗传算法 TWVRP 运筹优化调度 混合整数规划 带时间窗多车的物流配送路径优化 贵有贵的道理...

遗传算法 TWVRP 运筹优化调度 混合整数规划 带时间窗多车的物流配送路径优化 贵有贵的道理&#xff0c;代码质量高&#xff0c;有中文注释 只有修改表格中数据即可生成想要的配送路径上周点奶茶发现骑手绕了远路还差点超时&#xff0c;突然就想起之前折腾过的带时间窗多车配送路…...

编程新知 2026/3/27 20:37:37