购物车不管实在众多的电商网站还是手机APP中都很常见，它的实现逻辑也是相对复杂的。购物车作为组件开发，在其他应用或者页面也可以拿来直接使用。包含如下功能：
购物车模板商品数量加减商品总价结算商品删除商品全选反选实现效果如下：
引入bootstrap 购物车的页面不再使用html一点点的写，这里使用bootstrap，比较节省时间。所以要引入bootstrap，可以在BootCDN复制链接，如下：
使用bootstrap的面板组件构建页面 选择带标题的面板和带表格的面板及有脚注的面板结合，因为购物车页面需要有标题的表格，也需要有总价结算这样一个脚注栏。 使用bootstrap一个优点就是只需要填写对应的class即可。如面板类.panel ，面板标题类.panel-heading.panel-title和主体.panel-body。具体使用可以参考bootstrap官网。
写的购物车模板如下图： 代码如下：
<div class="container" id="app"> <div class="row"> <!-- bootstrap的面板组件包含带标题的面板、带表格的面板灯 --> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">我的购物车</h3> </div> <div class="panel-body"> <!-- 带表格的面板 table-hover:鼠标悬停高亮的表格--> <table class="table table-hover"> <thead> <tr> <th><input type="checkbox"></th> <th>商品名称</th> <th>商品单价</th> <th>购买数量</th> <th>小计</th> <th>商品操作</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox"> </td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td> <div class="btn-group btn-group-sm"> <button class="btn btn-danger" type="button">删除</button> </div> </td> </tr> </tbody> </table> </div> <!-- 带脚注的面板 --> <div class="panel-footer" style="text-align: right;"> 共计<span>100元</span> </div> </div> </div> </div>模拟购物车数据 前端先自己模拟数据，如下：
data: { //模拟购物车数据 goods: [ {id:1,name:'极米 （XGIMI ）Play特别版 投影机 投影仪 家用 便携（单手可握 侧投 HDR10解码哈曼卡顿音响内置电池）',price:2499,num:1}, {id:2,name:'荣耀MagicBook 2019 14英寸轻薄窄边框笔记本电脑（AMD锐龙7 3700U 8G 512G FHD IPS 指纹解锁）冰河银',price:4985,num:1}, {id:3,name:'盼盼 手撕面包 饼干蛋糕整箱大礼包箱装 奶香味2000g',price:52.5,num:2}, {id:4,name:'洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶',price:56,num:3}, {id:5,name:'联想 K5 Note 4GB+64GB 6英寸全面屏双摄手机 全网通 移动4G+ 双卡双待 极地黑',price:999,num:1}, {id:6,name:'小米MIX2 全面屏游戏手机 6GB+64GB 黑色 全网通4G手机 双卡双待 5.99"大屏',price:1299,num:1}, {id:7,name:'Apple MacBook Pro 15.4英寸笔记本电脑 银色（2017款Multi-Touch Bar/Core',price:15888,num:1}, {id:8,name:'OPPO R15 全面屏双摄拍照手机 4G+128G 幻色粉 全网通 移动联通电信',price:2799,num:1}, ] }数据循环渲染到页面中 在每一行处，即<tr>标签处使用v-for指令循环读取数据。然后使用item取商品信息。如下： 渲染后的结果为：
3.1 商品数量的增加 商品数量增加是给加号+绑定点击事件，每点击+一次即商品的数量num加1，通过v-model绑定商品的数量num，点击加号+一次，框中数字就会加1。这就实现了数据的双向绑定。如下： 实现方法：
3.2 商品数量的减少 商品的减少与商品的增加实现类似，即是对减号-绑定点击事件，事件的方式是商品数量num的自减，input框中数字已通过v-model双向绑定。 不同点是当数量小于1件时，删除商品信息。因此要做一个判断。当商品全部删除完以后，商品购物车列表不需要再呈现出来，因此也要进行一次判断。如下：
3.3 商品的删除 商品的删除最为简单，只需要给删除按钮绑定点击事件，如下： 实现方法： 【splice方法】： splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。 splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
3.4 商品的总价计算 总价就是商品数量与商品价格的乘积，总价的计算使用vue的计算属性，如下： 调用总价计算函数：
经过上面几步实现功能如下：
判断全选的方法是新建一个数组，点击选中一个商品时，这个商品的id就会push进新建的数组，当所有商品的id都在数组中时，说明全选了，反之，数组是空时说明没有商品被选中。 综上分析需要对全选框绑定selectAll全选事件，对每个商品前的选择框绑定单选事件select。如下： 方法如下：
购物车内商品选中状态影响总价，因为只需要计算选中商品的价格。所以需要修改总价函数，如下：
可以根据需求添加上商品的图片，只需要在模拟的数据中加上图片选项，如下： 绑定商品名称时绑定上商品图片，如下： 得到结果为： 至此，购物车算是基本功能完成了，可以再根据需求及美化页面做一些复杂的处理。
本项目源码：vue商城项目源码
