vue实现商城购物车功能

本文实例为大家分享了vue实现商城购物车功能的具体代码，供大家参考，具体内容如下

首先，先上最终的效果图

效果并不是很好看，但是这不是重点。

首先，我们先看下布局：

非常常见的布局，微商城购物车随处可见，先说明下，在这里，实现选中的功能并不是用传统的label+checkbox实现，而是一个单独的label，目的是为了简化dom结构，在传统的jq项目或者zepto项目中，一般会会这样写，主要是为了方便操作demo，但是vue项目完全不用考虑dom的操作，怎么方便怎么来就ok。

在加些简单的样式，

最近在学习stylus的使用，所以，就当做练习了。
接下就是javascript了。

这里用mock数据来代替后台请求数据的动作，为了方便测试，逻辑比较简单，首先getTotal这个方法用来计算选中的item的数量以及总价，select_one用来处理单个选中的逻辑，slect_all 用来处理全部选中以及全部取消选中的操作，reduce用来处理处理减操作，顾名思义add用来处理加的操作。当然在真实的开发中，还会有校验库存的动作，每次加减都要校验库存。数据处理也会更复杂，但是闻琴弦而知雅意，器原理都是相通的。

github地址传送门