I’ll post all the code. Take a look

       
  
 
  0  单价：10元 小计：0元 
 
  0  单价：7.5元 小计：0元 
 
  0  单价：15元 小计：0元 
 
  0  单价：20元 小计：0元 
 
  0  单价：150元 小计：0元 
 
  
单价最高：0元
 
总计：0元
   

It’s perfect to write a shopping cart using object-oriented methods. The following is the es6 code

class Cart{ constructor(){ //set，map，array，随你选 this.list = []; } //将商品加入购物车，需要判断购物车内是否有该商品， //以及商品规格是否相同 add(goods){} //将商品移除购物车,这个key可以是id，名称等等，你自己决定 remove(key){} //计算购物车总价，当然，最贵的当然可以计算出来了，排个序就号了 computeMoney(){} //保存购物车，localstorage,服务器，你自己决定，保存之后还是之前更新界面还是你决定 save(){} //清空购物车 clear(){} //购物车是否为空 isEmpty(){} //更多逻辑....... }

It is best to add hook functions (onSave, onAdd, onRemove....) to each method to achieve reuse and decoupling

The principle is that when the user clicks the plus sign on the product selection page, the data is obtained from the data source and put into a new array

var data=res.data; var shopCar=[]; add(index){//点击加号的时候 shopCar[index]=data[index] }

Then get a new array object, which is the shopping cart list.
Statistics is to add up the price fields in the array object. As for the method you use to add up, it depends on your preference. I use reduce.

If there is a minus sign, there must also be a corresponding subtraction operation.