vuejs仿美团,饿了么项目之——商品数量加减篇

JavaScript020

vuejs仿美团,饿了么项目之——商品数量加减篇,第1张

首先,新增个商品数量的加减功能组件,就叫cartcontrol.vue吧。新增个底部购物车组件,叫shopcart.vue吧。在good.vue中引入并注册组件。

cartcontrol.vue中,通过props来接收list对象

因为我在json中没有设置数量这个key,所以需要全局用vue.set进行注册这个属性。在add方法中,如果没有这个属性,那么就注册,如果有,那么就count++

这里增加了一点小效果。应用了<transition>。 并且当数量减到0的时候。通过v-show来控制减号和数值是否显示。

写的比较粗糙,估计只有我自己能懂。这里要注意一下,在BScroll实例中要配置下click:true。使better-scroll滚动部分支持点击事件。否则加减号的点击事件无效。好吧~下篇写下底部的购物车功能。

购物车 里一般放一个list列表, 这个购物车可以放在session里, 也可以放在本地cookie中

然后页面上有个地方显示 list.size() 就好, 至于往里面加东西, 就是点确定,然后入这个list里加入商品对象