当前位置：首页 > news >正文

Vue如何利用Postman和Axios制作小米商城购物车

news 来源：原创 2025/9/15 4:45:38

小编最近太忙了，没来得及更新博客！上一条博客我们写了小米商城购物车的简版，今天我们就在简版的基础之上来增加一些功能，写一下数量的加减、总价、删除（批量删除）、全选取消全选等功能。如果上一条博客没有看到的可以点进小编的主页查看喔！

一、购物车数量的加减

要实现加减的功能，首页看到加减我们就知道要把这个方法写在methods方法属性里面，这里的话加我们用add，减我们用sub。要想实现点一下鼠标加一个数量或者点击鼠标减一个数量，我们要利用for循环来做。

（一）加：

add(id) {

for (let i = 0; i < this.fruitList.length; i++) {

if (this.fruitList[i].id === id) {

this.fruitList[i].num++;

}

代码解释：遍历this.fruitList 数组，检查当前水果的id是否等于传入的id，如果找到匹配的水果，将其数量加上1。

（二）减：

sub(id) {

for (let i = 0; i < this.fruitList.length; i++) {

if (this.fruitList[i].id === id) {

if (this.fruitList[i].num > 1) {

this.fruitList[i].num--;

}

代码解释：遍历this.fruitList 数组，检查当前水果的id是否等于传入的id，如果找到匹配的水果，并且其数量大于1，才能够减少数量，接着进行数量的减减操作，在进行减的操作的时候，有必要的话，我们可以进行判断，避免选择的数量为负数。

二、删除

看到上述加减的方法之后，我们也应该知道删除也应该是写在methods里面的对吧，那么删除的话我们就不需要利用for循环遍历了。

del(id) {

this.fruitList = this.fruitList.filter(item => item.id !== id);

}

代码解释：通过filter方法创建一个新的数组，保留所有id不等于传入id的水果，将过滤后的新数组重新赋值给this.fruitList，从而删除指定的水果。

三、批量删除

delSelected() {

this.fruitList = this.fruitList.filter(item => !item.isChecked);

}

代码解释：把批量删除的代码写在methods方法里面，首先遍历this.fruitList数组，保留isChecked属性为false的水果（也就是未被我们选中的东西），紧接着将过滤后的新数组重新赋值给this.fruitList，从而删除所有被选中的水果。

四：全选（不全选）

if (this.fruitList.length === 0) {

this.isAll = false;

}

代码解释：检查删除后this.fruitList是否为空数组，如果this.fruitList为空，则将isAll属性设置为false

五、总价计算

总价=单个数量*单个数量价格，这里的话物品不同我们还要把每一种物品的总价进行相加，才得到最终的总价，这里话总价计算我们要写在计算机属性computed里面。

computed: {

totalPrice() {

let sum = 0;

for (let item of this.fruitList) {

if (item.isChecked) {

sum += item.num * item.price;

}

return sum;

totalCount() {

let count = 0;

for (let item of this.fruitList) {

if (item.isChecked) {

count += item.num;

}

return count;

}

代码解释：初始化一个变量sum，用于累加总价格，初始值为0,使用for of 循环遍历this.fruitList数组，其中item是数组中的每个水果对象,检查当前水果的isChecked属性是否为true，即是否被选中,如果水果被选中，将其数量乘以单价得到该水果的总价,返回累加后的总价格。

HTML核心代码如下：

<span class="span1">我的购物车</span>

<span class="span2">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>

</div>

<div v-if="fruitList.length > 0" class="main">

全选

</label>

</div>

</div>

<div class="td">{{item.price}}</div>

<button :disabled="item.num <= 1" @click="sub(item.id)" class="decrease"> -

</button>

</div>

<div class="td">{{ item.num * item.price }}</div>

</div>

<span>继续购物已选择：<span class="textcol">{{totalCount}}</span>件</span>

</div>

合计  :   

<span class="price">{{totalPrice}}</span>元

</span>

</div>

实现效果视频如下：动态-哔哩哔哩

如果有需要小编代码的可以私信小编！欢迎和大家一起交流学习！

相关文章：