Vue（9）购物车练习
购物车案例
经过一系列的学习，我们这里来练习一个购物车的案例
需求：使用vue写一个表单页面，页面上有购买的数量，点击按钮+或者-，可以增加或减少购物车的数量，数量最少不得少于0，点击移除按钮，会移除该商品，当把所有的商品移除后，页面上的表单消失，然后出现文字：购物车为空，表单下方是商品的总价格，随着商品的数量增加而增加，默认是0元，总体效果如下：
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
<style>
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;
}
</style>
</head>
<body>
<div id="app">
<div v-if="books.length">
<table>
<thread>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thread>
<tbody>
<tr v-for="(book, index) in books" :key="book">
<td>{{index+1}}</td>
<td>{{book.name}}</td>
<td>{{book.publish_date}}</td>
<td>{{book.price | showPrice}}</td>
<td>
<button @click="decrease(index)" :disabled="book.count <= 0">-</button>
{{book.count}}
<button @click="increase(index)">+</button>
</td>
<td>
<button @click="removeClick(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<p>总价：{{totalPrice | showPrice}}</p>
</div>
<h2 v-else>购物车为空</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
books: [
{"name":"算法导论", "publish_date":"2006-9", "price":20.00, "count": 0},
{"name":"UNIX编程艺术", "publish_date":"2006-2", "price":30.00, "count": 0},
{"name":"编程技术", "publish_date":"2008-10", "price":40.00, "count": 0},
{"name":"代码大全", "publish_date":"2006-3", "price":50.00, "count": 0},
],
},
methods: {
// 增加+
decrease(index){
this.books[index].count-=1
},
// 减少-
increase(index){
this.books[index].count+=1
},
// 移除按钮
removeClick(index){
this.books.splice(index, 1)
}
},
computed: {
// 计算总价格
totalPrice(){
let totalPrice = 0
for (let item of this.books){
totalPrice += item.price * item.count
}
return totalPrice
}
},
// 过滤器，将价格过滤成有2位小数的
filters: {
showPrice(price){
return '￥' + price.toFixed(2)
}
}
})
</script>
</body>
</html>
以上就是全部代码，当中使用到了很多知识点
v-for：循环，循环books列表v-on：事件监听，监听点击事件disabled：按钮是否可以点击的属性，为True可点击，为False不可点击，增加判断条件:disabled="book.count <= 0"当购物车数量≤0，则无法点击v-if和v-else：条件判断，判断books的列表长度，如果有长度展示列表，如果长度为0则展示文字购物车为空filters：自定义过滤器，过滤价格，使本身的价格过滤后带有2位小数computed：计算属性，计算购物的总价格
Vue（9）购物车练习的更多相关文章
- 使用vue模拟购物车小球动画
使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...
- Vue实战-购物车案例
Vue实战-购物车案例 普通购物车 实现的功能:添加商品到购物车,计算总价 <!DOCTYPE html> <html lang="en"> <hea ...
- vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...
- vue实战记录（六）- vue实现购物车功能之地址列表选配
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...
- vue实战记录（四）- vue实现购物车功能之过滤器的使用
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...
- vue实战记录（三）- vue实现购物车功能之渲染商品列表
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...
- vue实战记录（二）- vue实现购物车功能之创建vue实例
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...
- vue实战记录（一）- vue实现购物车功能之前提准备
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(一) GitHub:sue ...
- vue实现购物车和地址选配
参考文献 vue.js官网 项目演示:数据渲染,格式化数据,点击加,减号自动加减 项目准备 1. 项目css和js文件 https://github.com/4561231/hello ...
- vue.js购物车
vue.js https://cn.vuejs.org/v2/guide/ 简单购物车 <html> <head> <script src="https://c ...
随机推荐
- 人人都爱Kubernetes，Docker难道就不香了吗？
开篇 提起Docker,有很多人第一印象会认为它就是一个虚拟化容器,所以大家特别容易陷入到一种误区,就是觉得Docker只是在Linux操作系统之上又增加了一层,就跟OS上跑了一个VMWare一样.D ...
- Python数模笔记-NetworkX（3）条件最短路径
1.带有条件约束的最短路径问题 最短路径问题是图论中求两个顶点之间的最短路径问题,通常是求最短加权路径. 条件最短路径,指带有约束条件.限制条件的最短路径.例如,顶点约束,包括必经点或禁止点的限制:边 ...
- [OS] 概述&学习资料
计算机启动 启动自检 初始化启动 启动加载 内核装载 登录 中断 硬件中断 I/O设备 CPU Timer:时间片结束后,发中断给CPU Scheduler:将CPU合理分配任务使用 异常中断 内存: ...
- Shell $?获取函数返回值或者上一个命令的退出状态
Shell $?获取函数返回值或者上一个命令的退出状态 来自:互联网 时间:2021-01-12 阅读:2 $? 是一个特殊变量,用来获取上一个命令的退出状态,或者上一个函数的返回值. 所谓退出状态, ...
- Linux 部署 iSCSI 服务端
Linux 部署 iSCSI 服务端 服务端实验环境 iSCSI-server :RHEL8 IP:192.168.121.10 一.服务端安装 target 服务和 targetcli 命令行工具 ...
- 030. Python装饰器
一 装饰器 1.1 装饰器介绍 扩展函数新功能的@定义:替换旧函数,返回新函数,在不改变原有代码的前提下,为该函数扩展新功能;语法:@ (语法糖) 1.2 装饰器的原型 def show(func) ...
- Bash shell的特性
bash的特性 命令补全 Tab键 命令补全 路径补全 选项补全 yum install -y bash-completion -长格式 --all -短格式 -a 快 ...
- 技术干货 | 如何在 Library 中使用/依赖 mPaaS？
使用场景 在使用 mPaaS 框架过程中,有时需要复用模块.复用时需要按照使用 Module 依赖的方式添加模块.本文以将复用 mPaaS 扫码组件的 Module 为例进行说明. 前提条件 已按照原 ...
- jackson学习+CVE-2019-12086漏洞分析
jackson和fastjson差不多,都是用来更方便的处理json 国人用fastjson,老外用jackson/gson比较多 环境搭建: pom.xml: <dependency> ...
- MongoDB（7）- 文档插入操作
插入方法 db.collection.insertOne() 插入单条文档到集合中 db.collection.insertMany() 插入多条文档到集合中 db.collection.insert ...