vue(购物车项目完善)

vue 郑士旭
文章标签: vue

总结一下购物车项目遇到的问题和解决的方法以及一些未解决的方法和一些优化

1.优化

①商品列表处的排序无规律的自动排序

原理:随机互换数组里面的顺序

                dl(){
                    var len=this.gm.length;
                    for(var i=0;i<len;i++){
                        var ran=parseInt(len*Math.random());
                        var temp=this.gm[i];
                        this.gm[i]=this.gm[ran];
                        this.gm[ran]=temp;
                    }
                }

方法写好以后要调用它,这时候需要用钩子函数来调用了,在数据渲染之前调用,

beforeMount(){
    this.dl();
}

②当input框为空的时候,离开的时候让他显示为0,使用的是失去焦点事件

                bl(index){
                    if(this.number[index]==""||this.number[index]==null){
                        vm.$set(this.number,index,0);
                    }
                },

③当input框输入为不是整数的时候让变为0

image.png

④点击按钮的时候显示隐藏

image.png

image.png

image.png

⑤添加一些字段

image.png

image.png

image.png

主要是用v-html来改变

image.png

image.png

2.遇到的问题以及解决方法

问题:当改变input框的值,就是让他为空的时候,金额的值变成了NaN,失去焦点的时候才会变为0,数值会恢复正常

解决方法:当为空的时候让他跳出这个循环不执行他即可,可以使用continue

                        if(i.number==""||i.number==null){
                            continue;
                        };

问题:数值相加的时候会变成字符串相加

解决方法:使用parseInt解决


3.未解决的问题

当input框里面输入字母或者运算符的时候提醒用户

已解决

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :