小编最近太忙了，没来得及更新博客！上一条博客我们写了小米商城购物车的简版，今天我们就在简版的基础之上来增加一些功能，写一下数量的加减、总价、删除（批量删除）、全选取消全选等功能。如果上一条博客没有看到的可以点进小编的主页查看喔！
一、购物车数量的加减
要实现加减的功能，首页看到加减我们就知道要把这个方法写在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核心代码如下：
<div class="app-container" id="app">
<div class="breadcrumb">
<img class="logo" src="img/7.png" alt="">
<span class="span1">我的购物车</span>
<span class="span2">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
<span class="span3"> 2909696753 | 我的订单</span>
</div>
<!-- 购物车主体 -->
<div v-if="fruitList.length > 0" class="main">
<div class="table">
<!-- 头部 -->
<div class="thead">
<div class="tr">
<div class="th">
<!-- 全选 -->
<label class="check-all">
<input type="checkbox" v-model="isAll">
全选
</label>
</div>
<div class="th th-pic">商品名称</div>
<div class="th">单价</div>
<div class="th num-th">数量</div>
<div class="th">小计</div>
<div class="th">操作</div>
</div>
</div>
<!-- 身体 -->
<div class="tbody">
<div v-for="(item,index) in fruitList" :key="item.id" :class="{tr:true,active: item.isChecked}">
<div class="td"><input type="checkbox" class="mycheck" v-model="item.isChecked" /></div>
<div class="td goods"><img v-bind:src="item.icon" alt="" />{{item.name}}</div>
<div class="td">{{item.price}}</div>
<div class="td">
<div class="my-input-number">
<!--当num小于等于1时禁用-号-->
<button :disabled="item.num <= 1" @click="sub(item.id)" class="decrease"> -
</button>
<span class="my-input__inner">{{item.num}}</span>
<button @click="add(item.id)" class="increase"> + </button>
</div>
</div>
<div class="td">{{ item.num * item.price }}</div>
<div class="td"><button class="delbutton" v-on:click="del(item.id)">×</button></div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="bottom">
<div class="leftbox">
<span>继续购物已选择：<span class="textcol">{{totalCount}}</span>件</span>
</div>
<div class="right-box">
<span class="price-box">
合计 :
<span class="price">{{totalPrice}}</span>元
</span>
<!-- 删除按钮 -->
<button class="delete" @click="delSelected">删除选中</button>
<button class="pay">去结算</button>
</div>
</div>
</div>
</div>
实现效果视频如下： 动态-哔哩哔哩
如果有需要小编代码的可以私信小编！欢迎和大家一起交流学习！