vuejs手把手教你写一个完整的购物车实例代码

由于我们公司是主营业务是海淘，所以每个项目都是类似淘宝天猫之类的商城，那么购物车就是一个重点开发功能模块。介于之前我都是用日本季刊日本季刊来写购物车的，这次就用vuejs来写一个购物车。下面我就从全选，数量控制器，运费，商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑。

1.一层数据结构-全选

下面这段代码和vuejs官网里面检验盒绑定很像。不明白的可以直接上vuejs官网看看。

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 ' title vuejs-全选/title style type=' text/CSS ' * { padd : 0；保证金： 0；} a { color: # 333文本装饰：无；}/style/head dylabel输入类型=' checkbox ' name=' all ' v-: click=' choose all ' v-model=' select err。length==goodslist。长度/跨度全选/span/label div-v-for='(索引，项目)在goodsList ' a href=' JavaScript :中；rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' input type=' checkbox ' : value=' index ' v-model=' selecterr '/商品名称： span v-html=' item。名称'/span |价格： span v-html=' item。价格/跨度/a/div标签输入类型=' checkbox ' name=' all ' v-: click=' choose all ' v-model=' selectrr。length==goodslist。长度/跨度全选/span/labelscript src=' http :3358 cdn。bootscs。com/Vue/1。0 .7/Vue。js '/script脚本var Vue=new Vue({ El : ' body '，data : { goodsList 3360 [{ name : '山本汉方1 ',价格： '19.00' },名称： '山本汉方2 ',价格： '19.00' },{名称： '山本汉方3 ',价格： '19.00' },{名称： '山本汉方4 ',价格： '19.00' },{名称： '山本汉方5 '，price : '19.00' }，]，selecterr :[]}，ready : function() {}，methods : { chooseAll : function(event){ var Othis=this；没什么。select err=[]；if(事件。当前目标。选中){没有。古德斯特。foreach(函数（项，索引){没有。selecterr。推送(索引);});}控制台。日志(Othis。selecterr)；} } })/脚本/正文/html2 .二层数据结构-全选

一层数据结构的购物车在现实中是很少看到的，比如我们最熟悉的淘宝购物车是按照店铺分的，那么必然是多层