Vue|Vue 购物车案例练习 Vue购物车案例练习

1.购物车案例
2.代码实现
3.总结

1.购物车案例经过一系列的学习，我们这里来练习一个购物车的案例

需求：使用vue写一个表单页面，页面上有购买的数量，点击按钮+或者-，可以增加或减少购物车的数量，数量最少不得少于0，点击移除按钮，会移除该商品，当把所有的商品移除后，页面上的表单消失，
然后出现文字：购物车为空，表单下方是商品的总价格，随着商品的数量增加而增加，默认是0元，

总体效果如下：

2.代码实现

Title - 锐客网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; }
书籍名称出版日期价格购买数量操作
{{index+1}} {{book.name}} {{book.publish_date}} {{book.price | showPrice}} {{book.count}}
总价：{{totalPrice | showPrice}}
购物车为空

	书籍名称	出版日期	价格	购买数量	操作
{{index+1}}	{{book.name}}	{{book.publish_date}}	{{book.price \| showPrice}}	{{book.count}}

3.总结 v-for：循环，循环books列表
v-on：事件监听，监听点击事件
disabled：按钮是否可以点击的属性，为True可点击，为False不可点击，增加判断条件:disabled="book.count <= 0"当购物车数量≤0，则无法点击
v-if和v-else：条件判断，判断books的列表长度，如果有长度展示列表，如果长度为0则展示文字购物车为空
filters：自定义过滤器，过滤价格，使本身的价格过滤后带有2位小数
computed：计算属性，计算购物的总价格

【Vue|Vue 购物车案例练习】到此这篇关于Vue 购物车案例练习的文章就介绍到这了,更多相关Vue 购物车练习内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！