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核心知识点。