<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>index</title>
<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">
<!-- 如果list有内容,渲染购物车内容 -->
<div v-if="list.length">
<table>
<thead>
<tr>
<!-- id -->
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 给tr写入list的循环 -->
<!-- 不建议直接遍历整个对象,而是用item.name之类的方式写入数据,方便加入+-的按钮等操作 -->
<!-- 获取index是很重要der -->
<tr v-for="(item, index) in list" :key="item.id">
<!-- index每次循环+1 -->
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<!-- 价格建议保留两位小数,数据有.00 但渲染的时候被省略掉了 -->
<td>{{item.price|showPrice}}</td>
<!-- 可以直接让显示的内容保留两位小数点
由于总价有同样的需求,可以封装函数
-->
<!-- <td>{{'¥' + item.price.toFixed(2)}}</td> --> <td>
<!-- 如果count小于等于0 就禁用button -->
<!-- 给加减的button分别注册点击加减数字的事件 -->
<button :disabled="item.count<=0" @click="increment(index)">-</button>
<span>{{item.count}}</span>
<button @click="decrement(index)">+</button>
</td>
<td>
<!-- 点击移除事件 -->
<button @click="removeItem(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<!-- 计算并渲染总价(保留两位小数点并拼接¥符号) -->
<h2>总价格: {{totalPrice | showPrice}}</h2>
</div>
<!-- 如果购物车莫得东西,显示这个 -->
<div v-else>购物车没有书籍!</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
// books 的list
list: [{
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: {
// 计算总价
totalPrice() {
// 箭头函数
return this.list.reduce((preValue, item) => {
// 单价乘数量
// preValue是之前已经添加的价格 item是(回调中的array)是list中每一项
// reduce(callback,innitialValue)
// callback对数组中的所有元素调用指定的回调函数。 返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。
// callback 如果提供了 initialValue, 则 reduce 会对数组中的每个元素调用一次 callback.如果未提供 initialValue,则 reduce方法会对从第二个元素开始的每个元素调用 callbackfn 函数。
// 回调函数语法 function callbackfn(previousValue, currentValue, currentIndex, array1)
return preValue + item.price * item.count
// 0是初始值
}, 0)
}
},
filters: {
// 过滤器 这个东西放在methods里不如放在过滤器里
// 过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后数据
showPrice(price) {
return '¥' + price.toFixed(2)
}
},
methods: {
// 增加和减少让count++ -- ,然后vue会自动把变化的数据渲染到页面
//根据index判断要改的哪一行的count
increment(index) {
this.list[index].count--
// console.log(index);
},
decrement(index) {
this.list[index].count++
},
// 点击移除时,获取当前行index splice(要移除的位置,移除的列数),移除当前list行
removeItem(index) {
this.list.splice(index, 1)
}
},
})
</script>
</body> </html>

注释写的挺全的,所以就不做过多说明了~~

博客地址 :https://www.cnblogs.com/sandraryan/

vue实现购物车逻辑的更多相关文章

  1. 使用vue模拟购物车小球动画

    使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...

  2. 如何以python风格高逼格的改成购物车逻辑

    之前有一篇博文写到关于购物车的业务逻辑,分别运用cookie和redis存储未登录和登录用户的购物车数据,虽然已经很好的完成了业务逻辑,但是会发现代码的冗余很严重,也不够具有python特色,今天就让 ...

  3. Vue实战-购物车案例

    Vue实战-购物车案例 普通购物车 实现的功能:添加商品到购物车,计算总价 <!DOCTYPE html> <html lang="en"> <hea ...

  4. vue实战记录(五)- vue实现购物车功能之商品总金额计算和单选全选删除功能

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...

  5. vue实战记录(六)- vue实现购物车功能之地址列表选配

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...

  6. vue实战记录(四)- vue实现购物车功能之过滤器的使用

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...

  7. vue实战记录(三)- vue实现购物车功能之渲染商品列表

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...

  8. vue实战记录(二)- vue实现购物车功能之创建vue实例

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...

  9. vue实战记录(一)- vue实现购物车功能之前提准备

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(一) GitHub:sue ...

随机推荐

  1. ACdream 1099求第k大

    题目链接 瑶瑶的第K大 Time Limit: 10000/5000MS (Java/Others)Memory Limit: 512000/256000KB (Java/Others) Submit ...

  2. 在VMware安装Windows server 2003操作系统帮助文档

    在VMware上安装Windows server 2003操作系统,及VMware上三种网络连接模式(以VMware 10为例) 一.在Windows上安装VMware 10虚拟机软件 1.首先在Wi ...

  3. Python之路--协程/IO多路复用

    引子: 之前学习过了,线程,进程的概念,知道了在操作系统中进程是资源分配的最小单位,线程是CPU调度的最小单位.按道理来说我们已经算是把CPU的利用率提高很多了.但是我们知道无论是创建多进程还是创建多 ...

  4. Centos7.2源码编译安装LA(N)MP

    LAMP环境中php是作为apache的模块安装的,所以安装顺序是php放在apache的后面安装,这样便于安装php时可以在apache的模块目录生成对应的php模块. apache版本:2.4.3 ...

  5. VLSM(可变长子网掩码)

    http://blog.sina.com.cn/s/blog_635e1a9e0100yk51.html(转载) VLSM的介绍: VLSM(VLSM(Variable Length Subnetwo ...

  6. 【Leetcode 二分】 滑动窗口中位数(480)

    题目 中位数是有序序列最中间的那个数.如果序列的大小是偶数,则没有最中间的数:此时中位数是最中间的两个数的平均数. 例如: [2,3,4],中位数是 3 [2,3],中位数是 (2 + 3) / 2 ...

  7. 使用curl指令实现restful接口操作

    curl 是很方便的Rest客戶端,可以很方便的完成許多Rest API測試的需求,甚至,如果是需要先登入或認證的rest api,也可以進行測試,利用curl指令,可以送出HTTP GET, POS ...

  8. oracle Transactional

    从shutdown transactional命令发布起, 禁止建立任何新的oracle连接. 从shutdown transactional命令发布起,禁止启动任何新的事务. 一旦数据库上所有的活动 ...

  9. Kafka Connect HDFS

    概述 Kafka 的数据如何传输到HDFS?如果仔细思考,会发现这个问题并不简单. 不妨先想一下这两个问题? 1)为什么要将Kafka的数据传输到HDFS上? 2)为什么不直接写HDFS而要通过Kaf ...

  10. uva 10739【基础(区间)dp】

    Uva 10739 题意:给定字符串,可以增加.删除.修改任意字符,问最少经过多少次操作使字符串回文. 题解:定义dp[l][r]表示把从l到r的子串Sl...Sr变成回文串需要操作的最少次数.字符可 ...