效果界面如下
自动监听购买数量，checkbox的勾选，计算更新总价格
设置了购买数量最低是1个，因为低于一个就是0了，那你可以直接把这个商品移除了，这个是购物车最低存放量为1，只有勾选了checkbox才会结算总金额
代码
不用vue-cli实现，可自行拆分代码html，css，js
index.vue
<template>
<div class="cart">
<h3>Cart</h3>
<div v-if="list.length">
<table>
<thead>
<tr>
<th>
<input type="checkbox" v-model="isAllChecked" @click="checkAll()">
</th>
<th>序号</th>
<th>商品名称</th>
<th>种类</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list" :key="index">
<td>
<input type="checkbox" :value="item.id" v-model="item.isCheck" @click="checkOne(index)">
</td>
<td>{{index+1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.category }}</td>
<td>{{ item.price }}</td>
<td>
<button @click="handleReduce(index)" :disabled="item.qty === 1">-</button>
{{ item.qty }}
<button @click="handleAdd(index)">+</button>
</td>
<td>
<button @click="handleRemove(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<div>总价:￥ {{ totalPrice }}</div>
</div>
<div v-else>
<table>
<thead>
<tr>
<th> </th>
<th>序号</th>
<th>商品名称</th>
<th>种类</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7" style="text-align: center">购物车为空</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default{
name: 'Cart',
data() {
return {
list: [
{ id: 1, name: "西瓜", category: "Fruits", qty: 5, price: 16, isCheck: false},
{ id: 2, name: "苹果", category: "Fruits", qty: 3, price: 5, isCheck: false},
{ id: 3, name: "哈密瓜", category: "Fruits", qty: 6, price: 7, isCheck: false},
{ id: 4, name: "雪梨", category: "Fruits", qty: 1, price: 6, isCheck: false},
{ id: 5, name: "香蕉", category: "Fruits", qty: 2, price: 10, isCheck: false},
{ id: 6, name: "葡萄", category: "Fruits", qty: 2, price: 3, isCheck: false},
],
checkAllList: [],
isAllChecked: false
};
},
computed: {
totalPrice: function () {
var total = 0;
for (var i = 0; i < this.list.length; i++) {
if (this.list[i].isCheck) {
var item = this.list[i];
total += item.price * item.qty;
}
}
return total.toString().replace(/\B(?=(\d{3})+$)/g, ",");
}
},
methods: {
handleReduce: function (index) {
if (this.list[index].qty === 1) return;
this.list[index].qty--;
},
handleAdd: function (index) {
this.list[index].qty++;
},
handleRemove: function (index) {
this.list.splice(index, 1);
},
checkOne: function (index) {
if (this.list[index].isCheck === false) {
this.list[index].isCheck = true;
} else {
this.list[index].isCheck = false;
this.isAllChecked = false;
}
},
checkAll: function (item) {
if (this.isAllChecked === false) {
for (var i = 0; i < this.list.length; i++) {
var item = this.list[i];
item.isCheck = true;
}
} else {
for (var i = 0; i < this.list.length; i++) {
var item = this.list[i];
item.isCheck = false;
}
}
this.isAllChecked = !this.isAllChecked;
}
}
};
</script>
<style scoped>
.cart{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
table {
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
th,
td {
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th {
background: #f7f7f7;
color: #5c6b77;
font-weight: bold;
white-space: nowrap
}
button{
border: 0;
border-radius: 2px;
outline: none;
color: #333;
font-size: 15px;
}
</style>
