<template>
<div id="show" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th></th>
<th>id</th>
<th>商品名称</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td></td>
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
{{item.count}}
<button @click="handleAdd(index)">+</button>
</td>
<td>
<button @click="handleRemove(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<div>总价: {{totalPrice}}</div>
</template>
<div v-else>
您的购物车是空的!
</div>
</div>
</template>
<script>
export default {
name: "forDemo",
data() {
return {
list: [{
id: 1,
name: "iPhone7",
price: 7000,
count: 1
}, {
id: 2,
name: "iPad Pro",
price: 4000,
count: 15
}, {
id: 3,
name: "xiaomi9",
price: 3400,
count: 5
}],
}
},
methods: {
handleReduce: function (index) {
if (this.list[index].count === 1) {
return;
}
this.list[index].count--;
},
handleAdd: function (index) {
this.list[index].count++;
},
handleRemove: function (index) {
this.list.splice(index, 1);
}
},
computed: {
totalPrice: function () {
var total = 0;
for (var item of this.list) {
total += item.price * item.count;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
}
}
}
</script>
<style scoped>
[v-cloak] {
display: none;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
margin: 0 auto;
}
th, td {
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th {
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
white-space: nowrap;
}
</style>