一、前言                                                                            

                1、计算总金额

                2、点击删除按钮，删除对应的商品信息

                3、当还没结算的时候，当用户跳到其他页面时，提示用户是否要离开

二、主要内容                                                                     

1、计算总金额

         （1）效果演示：

         

 

　　（2）监听多个属性用到computed计算属性

computed:{            payment(){                let total = 0;//定义总金额                let count =0;//定义总数量                this.shopCart.forEach((shop)=>{                    if(shop.isSelected){
   //当上面的按钮勾上了，才计算                        count = count+shop.num;                        total = total + shop.num * shop.sell_price;                    }                })                return {                    total, count                }            }        },

 

 

2、点击删除按钮，删除对应的商品信息

　　删除操作可以用splice, delete

del(shop,index){
   //将当前的对象，和index传进来                this.shopCart.splice(index,1)//数组中的当前对象                            }

 

 

3、当还没结算的时候，当用户跳到其他页面时，提示用户是否要离开

　　（1）用导航守卫，在路由离开之前给用户提示

beforeRouteLeave(to, from, next){            let res = confirm("确定要离开吗");            if(res){                //保存用户编辑的数据                let obj={};                this.shopCart.forEach((shop)=>{                    obj[shop.id]=shop.num                })                GoodsTool.saveGoods(obj);                next();//然后放行            }else{                next(false);//取消，            }        }

 

 

 

三、总结