1.购物车案例

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

需求：使用vue写一个表单页面，页面上有购买的数量，点击按钮+或者-，可以增加或减少购物车的数量，数量最少不得少于0，点击移除按钮，会移除该商品，当把所有的商品移除后，页面上的表单消失，

然后出现文字：购物车为空，表单下方是商品的总价格，随着商品的数量增加而增加，默认是0元，

总体效果如下：

2.代码实现

    
 
  
 
 
书籍名称
出版日期
价格
购买数量
操作
 
 
{{index+1}}
{{book.name}}
{{book.publish_date}}
{{book.price | showPrice}}
 - {{book.count}} +
 移除
总价：{{totalPrice | showPrice}}
购物车为空

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 购物车练习内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！