
3.3 书店购物车项目实战
本节通过一个小型项目(书店购物车)来帮助读者掌握前文所提到的Vue.js相关知识点,效果如图3-7所示。

图3-7 书店购物车案例
1.搭建table结构
首先,搭建table结构,后续真实的数据需要靠for循环渲染。table结构使用HTML+CSS实现,代码如下:

运行结果如图3-8所示。

图3-8 table结构搭建
2.数据渲染
本项目需要数据渲染,此处提供循环的数据。分别有表格表头和表体数据,代码如下:

接下来实现for循环遍历,首先渲染表格头部,代码如下:

表头渲染的结果如图3-9所示。

图3-9 表头渲染
表头渲染结束后,接下来实现表体渲染,表体的渲染是针对tr的渲染,代码如下:

运行结果如图3-10所示。

图3-10 表体渲染
3.价格过滤器
本项目的价格都是一个纯数字,如果希望实现如图3-7所示的价格格式,则需要使用过滤器。全局过滤器和局部过滤器均可,此处选用局部过滤器,代码如下:

构建完过滤器后,在标签中使用,代码如下:
<td>{{item.price | priceFilter}}</td>
运行结果如图3-11所示。

图3-11 过滤器
4.计算总价
总价的计算需要遍历整个books数组,将每项的价格与数量相乘并累加。这里选用JavaScript的reduce()方法,代码如下:

在HTML中调用并启用价格过滤器,代码如下:

运行结果如图3-12所示。

图3-12 计算总价
5.购买数量
购买数量可以增加或减少。这里主要的逻辑在于:当触发减少时,如果数量小于或等于1,就需要禁止减少,因此需要增加判断语句。同时,商品数量的增加和减少都会使总价自动发生变化,购买数量的代码如下:

运行结果如图3-13所示。

图3-13 购买数量的增加与减少
6.移除商品
移除商品就是删除指定索引值的数组项,代码如下:

至此,书店购物车项目完成。
本项目通过购物车操作示例,帮助读者回顾循环渲染、事件、过滤器、计算属性等Vue核心知识点。