由于我们公司是主营业务是海淘，所以每个项目都是类似淘宝天猫之类的商城，那么购物车就是一个重点开发功能模块。介于之前我都是用jq来写购物车的，这次就用vuejs来写一个购物车。下面我就从全选，数量控制器，运费，商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑。
1.一层数据结构-全选
下面这段代码和vuejs官网里面checkbox绑定很像。不明白的可以直接上vuejs官网看看。
vuejs-全选 * { padding: 0; margin: 0; } a { color: #333; text-decoration:none; } 商品名称: | 价格:
2.二层数据结构-全选
一层数据结构的购物车在现实中是很少看到的，比如我们最熟悉的淘宝购物车是按照店铺分的，那么必然是多层的数据结构。这次在写这个二层数据接口的全选，碰到一个很大的坑，一开始我是用了一层数据结构的数据，发现当对象数组里面的某个值改变了，视图竟然没有触发！，所以会造成下面所有的checkbox都被选中了，最上面的那个全选checkbox竟然还是没有被选中。感觉告诉我这是vuejs的坑，后来发现是js的坑。具体可以看这个。方法是百度到了，可是放我这里没有用（应该是版本问题）。于是我就改了数据结构。
vuejs-全选 * { padding: 0; margin: 0; } a { color: #333; text-decoration:none; } .goods-item { display: block; } .store-item { margin-bottom: 20px; } 商品名称: | 价格:
3.一层数据结构-数量选择器
vuejs-数量选择器(1层数据结构) *{ padding:0; margin: 0; box-sizing: border-box; font-size: 16px; } .clearfix:after { content: "."; visibility: hidden; display: block; height: .1px; font-size: .1em; line-height: 0; clear: both; } .quantity-selector { margin-bottom: 20px; width: 8.571rem; line-height: 2.857rem; border: 1px solid #d1d6e4; border-radius: 3px; } .quantity-selector .reduce, .quantity-selector .add { float: left; width: 33.33%; border-right: 1px solid #d1d6e4; text-align: center; cursor: pointer; } .quantity-selector .number { float: left; width: 33.33%; height: 2.857rem; padding: .5rem 0; line-height: 1rem; border: none; text-align: center; } .quantity-selector .add { border-left: 1px solid #d1d6e4; border-right: none; } .quantity-selector .disable { color: #d2d2d2; cursor: default; } 商品数量 ：
商品库存 ：
－ ＋
4.二层数据结构-数据选择器
vuejs-数量选择器(2层数据结构) *{ padding:0; margin: 0; box-sizing: border-box; font-size: 16px; } a { text-decoration: none; color: #333; } .clearfix:after { content: "."; visibility: hidden; display: block; height: .1px; font-size: .1em; line-height: 0; clear: both; } .quantity-selector { margin: 0 auto; width: 8.571rem; line-height: 30px; border: 1px solid #d1d6e4; border-radius: 3px; } .quantity-selector .reduce, .quantity-selector .add { float: left; width: 33.33%; border-right: 1px solid #d1d6e4; text-align: center; cursor: pointer; } .quantity-selector .number { float: left; width: 33.33%; height: 30px; border: none; padding-left: 10px; text-align: center; } .quantity-selector .add { border-left: 1px solid #d1d6e4; border-right: none; } .quantity-selector .disable { color: #d2d2d2; cursor: default; } .store-item { width: 600px; margin: 30px auto; } .store-item th { height: 40px; background: #d2d2d2; -webkit-text-stroke: 1px #ff7500; font-size: 18px; } .store-item td { height: 60px; text-align: center; } .cal-store-box { text-align: right; } .store-footer { width: 600px; margin: 50px auto; display: flex; justify-content: space-between; align-items: center; }
选择 商品 单价 运费 数量 操作 － ＋ 删除 店铺总运费:
店铺商品总金额:
商品总金额:
运费总金额:
5.一个完整的购物车
vuejs-数量选择器(2层数据结构) *{ padding:0; margin: 0; box-sizing: border-box; font-size: 16px; } a { text-decoration: none; color: #333; } .clearfix:after { content: "."; visibility: hidden; display: block; height: .1px; font-size: .1em; line-height: 0; clear: both; } .quantity-selector { margin: 0 auto; width: 8.571rem; line-height: 30px; border: 1px solid #d1d6e4; border-radius: 3px; } .quantity-selector .reduce, .quantity-selector .add { float: left; width: 33.33%; border-right: 1px solid #d1d6e4; text-align: center; cursor: pointer; } .quantity-selector .number { float: left; width: 33.33%; height: 30px; border: none; padding-left: 10px; text-align: center; } .quantity-selector .add { border-left: 1px solid #d1d6e4; border-right: none; } .quantity-selector .disable { color: #d2d2d2; cursor: default; } label { cursor: pointer; } .choose-all { margin-left: 20px; } .store-item { width: 600px; margin: 30px auto; } .store-item th { height: 40px; background: #d2d2d2; -webkit-text-stroke: 1px #ff7500; font-size: 18px; } .store-item td { height: 60px; text-align: center; } .cal-store-box { text-align: right; } .store-footer { width: 600px; margin: 50px auto; display: flex; justify-content: space-between; align-items: center; }
选择 商品 单价 运费 数量 操作 － ＋ 删除 店铺总运费:
店铺商品总金额:
商品总运费:
商品总金额:
效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
