今天根据京东购物车截图，实现下面框出来的几个简单功能。
京东购物车
一、vue环境的搭建和项目新建
这里可以看我之前的文章vue环境搭建+项目新建
二、大致思路
（1）根据上面的截图，要写一个循环列表，这里引用bootstrap中table样式。然后把表格分为6列，确认好表头：
表格列
（3）遍历数据之前，先准备好json文件，里面写好各个商品的信息，然后使用axios实现数据初始化，将获取的数据赋值给products数组。引用axios.js文件。（关于axios的用法下面注释中有详细的介绍）
数据初始化
（2）从第二行开始，要通过v-for实现循环遍历data数据，显示每个商品的详细信息，包括关于商品的操作部分。
数据遍历
（3）最后逐步实现各块的功能，最终结果如下图所示：
钱钱购物车
三、功能实现
（1）商品数据信息格式
商品数据格式
（2）初步实现
①这里的isSelected默认都为true，直接在data中定义checkAll属性为true，根据v-model双向绑定获取checkAll的值渲染在视图上。
②点击全选框实现全选和反选，并根据每个复选框的状态更新全选框的状态：
这里要特别注意：click点击时，checkbox的状态还没改变 ，所以拿到的值总是相反的，遇到这种情况我们一般用change事件。change可以保证只当值变化后再触发函数。
在全选框中添加@change="change"事件，在循环的复选框中添加@change="checkOne"事件。这里，同时在vue示例中定义两个methods：change和checkOne，分别对应实现上述的两个小功能。
checkOne：使用every方法，只要遍历到false就返回false，否则一直遍历知道结束返回true，并赋给checkAll；
change：通过forEach遍历，实现对每个复选框的赋值。
③每件商品数量的设置：这里直接将input设为number类型，并设置min=1，同时要在v-model后面加.number，v-model.number是为了保证在数据中的数值是number类型，因为不加.number在后台看见的数据是字符串的形式。
④针对属性值的绑定，例如：img的src、title、class、style等，vue提供了v-bind的指令简写成：
⑤规范数据显示：小计一栏，可以直接在{{}}中计算数量和单价的乘积获取小计的值，这种时候要对获取的数据进行规范化。
这样使用管道符的方法能够很好的实现代码toFixed()方法的复用，带有保留即为的参数，可以针对不同要求保留不同的小数位，修改起来也很方便。
过滤器
⑥删除：这个功能比较简单，直接对每个button绑定remove方法，至于如何确定要删的是哪一项，可以通过参数传递，将v-for获得的product传给remove，然后使用filter方法对每一个item和product作比较，如果相等则找到了要删除的那项，定义返回false，不放进新数组中，将其过滤掉，返回新的商品数组。（废话一堆，其实看代码就懂了^-^）
⑦总计：每个商品数量和商品单价的乘积的累加求和，用reduce。
关于这些数组方法就不详细描述了，可参考JS数组方法集合
四、完善
这样实现看似没什么问题，但是有两点：
（1）关于总计的值，sum写在methods中，数据一变化就会重新调用此函数，算出新结果，它不会缓存上一次的结果，这样的写法性能不高。
（2）关于全选的初值值，应该要通过计算每个复选框的值得到的，而不是自己设的，同样如果添加计算方法，也会有（1）中提到的问题。
计算属性
当给全选赋值时要影响其他人的变化，当页面刷新时我们获取全选值是根据下面的checkbox来计算出来的结果给全选赋值。相当于get和set，可以使用computed，是一个计算属性不是一个方法。
可以直接放在上面v-model中就可以实现数据-视图的双向绑定，就可以不用添加事件来改变数据视图的结果即页面刷新触发get，点击复选框触发set。即：当改变下面单个复选框时会触发get更新全选的值；当改变全选框时，设置全选框的值会触发set重新对下面单个复选框进行赋值。（有点绕-.-）
根据这个思路可以对checkAll和sum改写成computed形式。
computed:{
checkAll:{
get(){//get和set中this指向vm实例 默认v-model会获取checkAll值触发get方法
return this.products.every(item=>item.isSelected);
},
//当我们给checkbox赋值时会调用set方法
set(val){
this.products.forEach(item=>item.isSelected = val);
},
},
sum:{//sum的结果会被缓存，如果以来的数据没有变化就不会重新执行
get(){
return this.products.reduce((prev,next)=>{
if(! next.isSelected)return prev; //如果当前没被选中，就不加当前这一项
return prev + next.productPrice*next.productCount;
},0)
}
}
},
这里就可以省掉methods中的三个方法，直接将这些方法写到computed计算属性中，同时也不用定义data中的checkAll变量，代码也更好管理。
最后简单的购物车就实现啦，完整代码参考vue-demo中的cart.html和computed-carts.html
网友评论