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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/240304.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络爬虫之多任务数据采集(多线程、多进程、协程)

进程&#xff1a;是操作系统中资源分配的基本单位 线程&#xff1a;使用进程分配的资源处理具体任务 一个进程中可以有多个线程&#xff1a;进程相当于一个公司&#xff0c;线程就是公司里面的员工。 一 多线程 多线程都是关于功能的并发执行。而异步编程是关于函数之间的非…

vue-plugin-hiprint使用教程【3】

5.12、重写原有参数 //格式 export default(function() {// code }()) // 这里要注意&#xff0c;function是自执行函数// 插件原来的代码查看文章顶部的资源。代码有点多&#xff0c;CSDN不能直接展示// 上传CSDN默认要积分&#xff0c;不知道怎么弄成免费的。我传了一份到天…

C#中使用OpenCV的常用函数

以下是一些C#中使用OpenCV的常用函数例子&#xff1a; 1. 加载图像&#xff1a; using OpenCvSharp;Mat image Cv2.ImRead("path_to_your_image.jpg", ImreadModes.Color); 2. 显示图像&#xff1a; Cv2.NamedWindow("Image Window", WindowFlags.Nor…

C语言——最古老的树

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 缺乏明确的目标&#xff0c;一生将庸庸…

Harmonyos系统使用http访问网络和应用数据管理

http数据请求 HTTP数据请求什么是HTTP如何发起HTTP请求发起http请求。 应用数据管理什么是首选项首选项运作机制常用接口介绍常用接口使用前提保存数据&#xff08;put&#xff09;获取数据&#xff08;get&#xff09;数据持久化&#xff08;flush&#xff09;删除数据&#x…

drf知识--02

APIView执行流程分析 源码分析&#xff1a; # 1 在路由中&#xff1a;path(books/, views.BookView.as_view()),请求来了 # 2 先看 as_view()---->APIView的 as_view---》as_view执行结果跟之前一样&#xff0c;去除了csrf认证classmethoddef as_view(cls, **initkwargs):vi…

C# WPF上位机开发(文件对话框和目录对话框)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 一个上位机软件在处理数据的时候&#xff0c;除了配置文件、数据文件之外&#xff0c;一般还需要使用选择对话框进行文件和目录的选取。如果不这样…

Go使用websocket

文章目录 引言进入正题1、依赖2、升级客户端3、websocket处理方法4、完整代码 引言 实时性较高的地方&#xff0c;我们可能会使用到websocket对信息进行实时推送&#xff0c;涉及到websocket就会有开启连接&#xff0c;接收消息&#xff0c;推送消息&#xff0c;错误处理等机制…

20231222给NanoPC-T4(RK3399)开发板的适配原厂Android10的挖掘机方案并跑通AP6398SV

20231222给NanoPC-T4(RK3399)开发板的适配原厂Android10的挖掘机方案并跑通AP6398SV 1、简略步骤&#xff1a;rootrootrootroot-X99-Turbo:~/3TB/3399-android10$ cat Rockchip_Android10.0_SDK_Release.tar.gz0* > Rockchip_Android10.0_SDK_Release.tar.gz rootrootrootro…

【随笔】MD5加密字符串、文件apache、springframework实现

文章目录 一、引入依赖二、工具代码三、测试代码四、输出结果 一、引入依赖 commons-codec <dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId><version>1.13</version> </dependency>二…

C++进阶-继承

继承 一、继承的概念及定义1.1 继承的概念1.2 继承的定义1.2.1 定义格式1.2.2 继承关系和访问限定符1.2.3 继承基类成员访问方式的变化 二、基类和派生类对象赋值转换三、继承中的作用域3.1 同名成员变量3.2 同名成员函数 四、派生类的默认成员函数五、继承与友元六、继承与静态…

Leetcode—43.字符串相乘【中等】

2023每日刷题&#xff08;六十八&#xff09; Leetcode—43.字符串相乘 算法思想 实现代码 class Solution { public:string multiply(string num1, string num2) {int len1 num1.size(), len2 num2.size();string ans;int end1 len1 - 1, end2 len2 - 1;int arr[len1 l…

[RK-Linux] RK3399支持M.2 NVMe SSD启动

延续《[RK-Linux] 从主线U-Boot移植PCIe及其PHY驱动到RK3399 U-Boot》 启动流程: maskrom -> loader(从 eMMC 存储器加载) -> u-boot(从 eMMC 存储器加载)-> kernel (从 M.2 NVMe SSD 加载)-> rootfs (从 M.2 NVMe SSD 挂载)配置从 M.2 NVMe SSD 启动: …

centos7 nginx搭建本地yum仓库

安装依赖 yum -y install yum-utils createrepo创建本地存储目录 mkdir /data/mirror同步extras、updates、base、epel仓库到/data/mirror目录 reposync -n --repoidextras --repoidupdates --repoidbase --repoidepel -p /data/mirror创建仓库索引 createrepo -po /data/mirro…

vue3 常用函数\\组件传值\\抽离封装

一、简介 组合式api 1、 setup&#xff08;&#xff09; 组合式api的入口页面启动后&#xff0c;第一个自动执行的函数定义项目中所有的变量、方法所有的变量和方法&#xff0c;只有return出去&#xff0c;在页面视图中正常使用<template><!-- v-text的简写-->…

、写入Shellcode到注册表上线

其实本质就是将shellcode写入到注册表中&#xff0c;然后读取注册表中的shellcode&#xff0c;然后创建线程去执行shellcode。 如下图: 写入注册表shellcode 这里将shellcode写入到注册表中&#xff0c;在我们需要的时候再去读取然后执行。 这里用到如下两个Windows API函…

福FLUKE禄克8808A数字多用表

福禄克8808A&#xff0c;用于制造、研发、维修等应用的多功能数字表&#xff0c;FLUKE 8808A 5.5位数字多用表可以完成当今众多常用的测量工作。无论是功能测 展开 福禄克8808A&#xff0c;用于制造、研发、维修等应用的多功能数字表&#xff0c;FLUKE 8808A 5.5位数字多用表可…

【音视频】remb twcc原理

目录 twcc简介 WebRTC REMB 参考文档 twcc简介 TWCC全称是Transport wide Congestion Control&#xff0c;是webrtc的最新的拥塞控制算法。其原理是在接收端保存数据包状态&#xff0c;然后构造RTCP包反馈给发送端&#xff0c;反馈信息包括包到达时间、丢包状态等&#xff…

室内导航技术在智慧医疗的革新应用

随着科技的飞速发展&#xff0c;智慧医疗已经成为现代医疗服务的重要组成部分。在这个背景下&#xff0c;室内导航技术逐渐崭露头角&#xff0c;为智慧医疗建设带来了革命性的改变。本文将深入探讨室内导航技术在智慧医疗中的应用&#xff0c;并分析其为医疗服务带来的诸多便利…

vue:ref的作用和实例

定义&#xff1a;用来获取元素或子组件注册或者引用信息&#xff0c;父组件通过$ref获取到相应的DOM对象和子组件 1、vue中ref的作用 获取页面的DOM元素获取子组件的对象&#xff08;也是一种通信方式&#xff09; 2、实例 1、获取DOM&#xff0c;首先创建一个父页面index然…