Vue简单实现购物车功能

27
四月
2021

Vue简单实现购物车功能

本文用Vue简单实现了一下购物车功能,简单是指代码简单,只有50行,也指样式简单,愧对前端。话不多说,直接上图上代码吧!

这是购物车的页面,虽然看着比较简陋,但麻雀虽小五脏俱全,数据用的是在state里面的固定数据。

先捋一下购物车的逻辑:

1、在选中该商品的时候,总价变为该商品的价格。

2、点击”+“或 ” - “的时候,商品的数量随之变化,总价也跟着变化。

3、当点击全选的时候,全部商品选中,总价变为如今商品价格*商品数量之和,取消全选的时候,价格变为0。

4、点击删除的时候,该商品从列表中被删除,如果该商品被选中的情况下,总价随之而变。

大致的逻辑便是这四个,那我们先来实现第一个功能,在选中的时候,总价随着商品而改变。

先看商品代码和store里面的state结构代码

先来实现第一个功能:选中的时候,总价发生改变

由页面点击时传出来一个索引值,这里用payload接收一下,并且判断这个input是否被选中,如果被选中的情况下,便让总价的值等于选中的商品价格*商品的数量。

这里多加了一个判断,当所有的商品都选中的时候,让全选的状态变为选中,这里用到了every函数

第二个功能  增加和减少:

同样是先接收索引值,修改点击的商品数量。不要陷入思维误区,在点 “+” 的时候直接让总价加上该商品的单价就可以了,不需要再麻烦的重新去调用总价的函数,商品的数量也加1就可了。

同理,点击 “ - ” 也是一样的,只不过减号要多加一个判断,在数值等于1的时候,就不能再继续减下去了。

 

第三个功能  全选和非全选:

先让总价等于0,防止全选的时候和上一次选择发生叠加,如果使全选的状态,让当前所有商品的数量*对应商品的价格,

如果不是全选的状态,则让所有的商品取消选中状态,让总价变为0即可。

 

第四个功能  删除商品:

同样是接收传回的索引值,用splice的方法来替换点击的商品,用v-show,让该商品不显示并且取消选中状态,同时让总价变为0,再重新计算一下所有被选中的商品总价即可。

用这个方法的原因是为了保证原有数组的索引值不变,不会出现错乱的状态,可以试下如果直接从数组里面删除该数值的话,总价和数量是会出现错乱的。

这样购物车的功能便基本上全部实现了。

有发现不足的地方,欢迎各位源友指正,有更好的方法,也欢迎分享。

TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员