rss 推荐阅读 wap

环球微信网,中国新闻网!

热门关键词:  as  自驾游  xxx  云南  卡瘦
首页 新闻聚焦 城市报道 理财投资 休闲娱乐 行业热点 购物消费 旅游资讯 科技创新 商务营销 微商创业

vue-购物车逻辑

发布时间:2021-01-14 02:35:00 已有: 人阅读

  在购物车布局里循环购物车的数据,遍历数组内容 动态展示购物车数据,循环项包括行 名字, 品种, 数量 加按钮 减按钮 ,价格 (数量乘单价),购物车每增加一个数据 就多出来一个行包含这些内容 给这一行里的加按钮和减按钮加个点击事件,带参数item

  点击行里的加号的时候 购物车数组中的item里面的数量 自增,item.quantity ++ 后面的单价乘数量会自动变化

  点击行里的减号的时候 购物车数组中的item里面的数量 自减,item.quantity -- 后面的单价乘数量会自动变化,如果减到0,就把这一条清掉(用splice()方法从数组中删除项目并返回被删除的项目,indexOf()方法配合,indexOf方法返回item在数组中首次出现的位置,splice方法删除的是第一个,后面的参数是删除一个,连起来就是exOf(item),1)),点击减号,数量自减一,当数量小于等于0时,执行删除当前item的方法,删除当前item是一个方法,等到数量小于等于0时执行,这个函数带参数item

  购物车下面的总价total 使用computed计算属性得出 ,要得出总价total 要遍历拿到整个数组的单价和数量 先定义一个totalCost等于0,下面开始遍历,一个索引index在购物车这个数组里,单个的索引叫single,给single赋值为this.baskets[index],totalCost的值是用这个索引里的单价乘以这个索引里的数量,有几个totalCost就自己加上几个totalCost ,符号用加等,遍历出去再返回 totalCost就是total的值

  解决商品添加时商品名字相同 点添加按钮addToBasket是把当前的item相关内容添加到购物车,给这个点击事件传参数 参数包括item和当前item相关的参数,addToBasket的方法事件是把当前的item的name size price quantity 名字品种价格数量 push到购物车的数组中,现在用一个变量来接收这些属性,让basket是一个对象,对象中包括item.size item.price item.quantity(数量初始为1),包括这几项,接下来大如果购物车baskets数组长度大于0(即有内容不为空)的时候,进行过滤 定义一个结果result ,使用filter方法过滤,如果要添加的数据basket和购物车baskets数组里的item内容相同时(返回的内容是 basket.name===item.name并且basket.price===购物车数组中的价格)就匹配上了,此时result会返回一个当前的结果(列表中当前的item相关的内容),这个时候小如果result不为null并且长度大于0,则这个结果result中的第一个(此处要用下标)quantity加加,小否则即返回的result为空数组,把basket push到购物车数组baskets中去 ,大否则即购物车数组baskets为空,没有这个数组,把这个basket push到购物车数组中去

首页 | 新闻聚焦 | 城市报道 | 理财投资 | 休闲娱乐 | 行业热点 | 购物消费 | 旅游资讯 | 科技创新 | 商务营销 |免责声明

Copyright2008-2020 环球微信网 www.cnqiu.net 版权所有 业务QQ:121390454 Power by DedeCms

电脑版 | wap