【小兔鲜电商前台 | 项目笔记】第八天

前言小兔鲜电商前台项目是一个基于Vue的PC端项目本系列文章我将总结我在这个项目中学到的知识点写项目笔记。如果你正好在学Vue或想从零搭建一个前端项目希望本系列文章可以帮助到你。【小兔鲜电商前台 | 项目笔记】第八天今日完结今日收获1.本地添加 | 删除商品2.通过计算属性算出商品的总数 | 总价3.购物车单选 | 全选功能4.额外传自定义参数总结今日完结本地加入购物车实现本地 - 头部购物车列表渲染本地 - 头部购物车删除实现本地 - 头部购物车统计计算本地 - 列表购物车数据渲染本地 - 列表购物车单选功能实现本地 - 列表购物车全选功能实现本地 - 列表购物车统计数据实现今日收获1.本地添加 | 删除商品添加商品constaddCartasync(goods){// 添加购物车操作// 已添加过 - count 1// 没有添加过 - 直接push// 思路通过匹配传递过来的商品对象中的skuId能不能在cartList中找到找到了就是添加过constitemcartList.value.find((item)goods.skuIditem.skuId)if(item){// 找到了item.count}else{// 没找到cartList.value.push(goods)}}删除商品constdelCartasync(skuId){// 思路// 1. 找到要删除项的下标值 - splice// 2. 使用数组的过滤方法 - filterconstidxcartList.value.findIndex((item)skuIditem.skuId)cartList.value.splice(idx,1)}2.通过计算属性算出商品的总数 | 总价constallCountcomputed(()cartList.value.reduce((a,c)ac.count,0))constallPricecomputed(()cartList.value.reduce((a,c)ac.count*c.price,0))3.购物车单选 | 全选功能单选script setupconstsingleCheck(i,selected){cartStore.singleCheck(i.skuId,selected)}/scriptel-checkbox:model-valuei.selectedchange(selected)singleCheck(i,selected)/// 单选功能constsingleCheck(skuId,selected){// 通过skuId找到要修改的那一项 然后把它的selected修改为传过来的selectedconstitemcartList.value.find((item)item.skuIdskuId)item.selectedselected}全选script setupconstallCheck(selected){cartStore.allCheck(selected)}/scriptel-checkbox:model-valuecartStore.isAllchangeallCheck/// 是否全选计算属性constisAllcomputed(()cartList.value.every((item)item.selected))// 全选功能actionconstallCheck(selected){// 把cartList中的每一项的selected都设置为当前的全选框状态cartList.value.forEach(itemitem.selectedselected)}4.额外传自定义参数原生 change 自带的参数默认只能拿到一个值是否选中true/false// 默认写法只能拿到选中状态拿不到当前行数据 ichangesingleCheck想要传递自定义参数我们可以用箭头函数包裹change(selected)singleCheck(i,selected)总结今天学到了日常项目很常见的增删操作以及总结商品的数量和总价。如果我的内容对你有帮助请点赞评论收藏。创作不易大家的支持就是我坚持下去的动力