美文网首页为友谊 刚刚开始
vue学习之简单购物车实现

vue学习之简单购物车实现

作者: Mango97 | 来源:发表于2018-08-18 11:24 被阅读417次

    今天根据京东购物车截图,实现下面框出来的几个简单功能。

    京东购物车

    一、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

    相关文章

      网友评论

        本文标题:vue学习之简单购物车实现

        本文链接:https://www.haomeiwen.com/subject/wngxiftx.html