Vue案例五(处理购物车数据)

原创 大大大大糖糖 随笔 vueJs 760阅读 2017-05-16 14:01:02 举报

Vue案例五(处理购物车数据)

此前已用vue-cli初始化了项目结构,在此做一个小小购物车的案例

默认的vue-router的“/”指向Hello.vue。懒得改名字了,直接在hello里面写

hello.vue

cart.vue

此核心为:
1、商品页和购物车分离(购物车作为一个组件被引入到商品页)
2、用户改变选择商品的数据,将此数据传递给子组件(购物车)

基本思路:
列表页:
1、v-for渲染商品列表和用户操作按钮(+、-)
2、点击按钮时,“+” 按钮:检测商品数据对应条目是否具有num属性(若有,说明之前操作过),若果没有,则添加num属性,并初始化num=0,num++
"-" 按钮:如果对应商品条目中具有num属性进行num--操作,如果num<=0,num=0
3、取出商品数组中num属性大于0的条目,push进新的数组,传递给购物车组件
4、在购物车组件中进行处理

方法固然重要,更重要的是思想,共勉

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复