蓝桥web真题：第一届大学组8-10题

前言，此为结尾篇了，觉得不错请帮我点赞、收藏、关注

此篇干货满满

第8题：购物车

介绍：

网上购物已成为现代人生活中不可或缺的一部分，那么人们最常用到的购物车功能又是如何实现的呢？

本题需要在以提高的基础项目中，使用Vue2.x的知识，解决购物车商品管理过程中遇到的问题。

目标：

1. 修改adToCart方法，实现将商品加入购物车的功能。即：

​ （1）点击“加入购物车”按钮后，如果购物车中不存在改商品，则将改商品添加到购物车末尾，并初始化数量为1；

​ （2）如果购物车已存在改商品，则只在原数量上+1即可。

2. 完善removeGoods方法，实现移出购物车商品功能。即：

   （1）点击购物车商品后对应的减号（“-”）按钮，将其数量在原数量上+1；

   （2）如果减后数量为0，则将该商品从购物车中删除。

几个解题关键点：

1. 检查是否有该商品了。使用Array.some(function(el){return boolean}),返回值为布尔类型。确认商品是否存在

2. 查找商品在购物车的索引。用forEach()逐个查找，找到的化返回商品在购物车的id

3. 数量为0的删删除。数组函数Array.splice(索引位置，删除元素个数)

关键代码：

 new Vue({
   
     el: '#app',
     data: {
   
         cartList:[],
         goodsList:[]
     },
     mounted() {
   
         this.goodsList = GoodsArr;
     },
     methods:{
   
         addToCart(goods){
   
             // TODO：修改当前函数，实现购物车加入商品需求
             let flag = this.cartList.some(el=>{
   
                 return el.id == goods.id
             })
             if (flag) {
   
                 let gindex = 0;
                 this.cartList.forEach((el,index) => {
   
                     if(el.id == goods.id){
   
                         gindex =  index
                     }
                 });