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 ...
随机推荐
- shell中的 “.”和source export
在shell脚本里面export的环境变量,在set里面竟然看不到.为什么在shell脚本里面用export设置环境变量之后,当shell执行完了,用set命令看不到呢?但是你如果直接在终端里expo ...
- [DB] HDFS
体系架构 NameNode HDFS主节点.管理员 接收客户端(命令行.Java程序)的请求:创建目录.上传.下载.删除数据 管理和维护HDFS的日志和元信息 日志文件(edits文件) 二进制文件, ...
- 【转载】Linux字符集和系统语言设置-LANG,locale,LC_ALL,POSIX等命令及参数详解
Linux字符集和系统语言设置-LANG,locale,LC_ALL,POSIX等命令及参数详解 1清风揽月10人评论5006人阅读2017-06-21 15:48:43 博文说明[前言]: 本文 ...
- Installing SFTP/SSH Server on Windows using OpenSSH
Installing SFTP/SSH Server 1. On Windows 10 version 1803 and newer In Settings app, go to Apps > ...
- linux 创建网桥
由于最近项目需验证个问题,需求是要创建一个虚拟机网桥,在使用ifconfig命令查看时让docker0网桥不在第一个显示,因此,我们创建一个虚拟网桥让它排在第一位置 项目使用Centos7系统,因此使 ...
- mysql的日志文件及其作用
MySQL中有七种日志文件,分别是: 重做日志(redo log) 回滚日志(undo log) 二进制日志(binlog) 中继日志(relay log) 错误日志(errorlog) 慢查询日志( ...
- HTTP状态 500 - 内部服务器错误之Could not open ServletContext resource [/db.properties]或者 [/mybatis.xml]
报错原因是因为找不到db.properties或者mybatis.xml,但是我明明写了有.找了一下,才发现spring-dao.xml里面这两个配置文件地址有问题 Maven项目,applicati ...
- 机器学习PAL数据预处理
机器学习PAL数据预处理 本文介绍如何对原始数据进行数据预处理,得到模型训练集和模型预测集. 前提条件 完成数据准备,详情请参见准备数据. 操作步骤 登录PAI控制台. 在左侧导航栏,选择模型开发和训 ...
- Google Pixel 超分辨率--Super Resolution Zoom
Google Pixel 超分辨率--Super Resolution Zoom Google 的Super Res Zoom技术,主要用于在zoom时增强画面细节以及提升在夜景下的效果. 文章的主要 ...
- AI+IoT+电池应用
AI+IoT+电池应用 AIoT电池 突破你的想象 将行业领先的电池电化学技术与前沿的能源物联网最佳实践相结合,利用智能物联技术开展电池全生命周期的管理优化和交叉领域的协同应用,解锁动力电池全生命周期 ...