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核心知识点。 MNmNosd1uAOC6aYlvt/6Hsz4mjHmtUBCJQgI5oyk5IM9wYs487aYgpUSNiTAhs3H