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

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

news 2026/2/8 13:39:05

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;
}

代码解析：

创建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>
this.books.splice(index, 1);这句代码的含义是从index项开始索引，1表示从当前索引项开始（包含该索引项）向下索引个数
<td><button @click="removeBook(index)">移除</button>
</td>
removeBook(index) {this.books.splice(index, 1);
},
这段代码表示如果有选中图书，则进行app操作；若全部移除图书之后，则在页面上显示购物车为空~

<template v-if="books.length > 0"></template>
<template v-else><h2>购物车为空~</h2>
</template>
这段代码计算图书总金额，注意computed:的使用
computed: {totalPrice() {let finalPrice = 0;for (let book of this.books) {finalPrice += book.count * book.price;}return finalPrice;},
这段CSS代码表示含义为给button按钮左右间距5px
.counter {margin: 0 5px;
}

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

Vue综合案例1-书籍购物车案例要求: 代码： <!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 外部表分隔符问题的实用指南

简介： 在使用 Hive 外部表时，分隔符设置不当可能导致数据导入和查询过程中的问题。本文将详细介绍如何解决在 Hive 外部表中正确设置分隔符的步骤。问题描述： 在使用Hive外部表时，可能会遇到分隔符问题。这主要是因为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程序（简例） 03. ROS学习笔记(三)—好用的终端Terminator 04. ROS学习笔记(四)—使用 VScode 启动launch文件运行多个节点 05. ROS学习笔…...

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

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

🐱作者：一只大喵咪1201 🐱专栏：《RTOS学习》 🔥格言：你只管努力，剩下的交给时间！ 目录 🍓信号量和互斥量🍅创建🍅Take🍅Give &#x…...

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

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

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

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

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

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

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

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

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

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

VueCron使用方法

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

编程日记 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中，结构体的定义格式为： struct <结构体名> {// 成员变量和成员函数 };在这个定义中，<结构体名>就是结构体的名称，而这个名称位于结构体定义的末尾，分号之前…...

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

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

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

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

如何在Go中制作HTTP服务器

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

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

Linux笔记---系统信息

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

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

Wireshark基础及捕获技巧

第一章：Wireshark基础及捕获技巧 1.1 Wireshark基础知识回顾 1.2 高级捕获技巧：过滤器和捕获选项 1.3 Wireshark与其他抓包工具的比较第二章：网络协议分析 2.1 网络协议分析：TCP、UDP、ICMP等 2.2 高级协议分析：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数据库，当前很多应用系统的数据都存储在MySQL或者Pos…...

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

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

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

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

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

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

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

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...

编程新知 2026/1/23 7:04:53

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容在 visual studio 2017 平台上，开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的综合运用 c#.net 知识，在 vs 2017 平台上，进行 ASP.NET 应用程序和简易网站的开发；初步熟悉开发一…...

编程新知 2026/1/23 12:16:56

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2026/2/5 21:34:41

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

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

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

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码：‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...

编程新知 2026/2/7 4:21:44

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2026/1/31 3:52:49