效果图:
<div v-if="tableData.length">
<table>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
<tr v-for="(item, index) in tableData">
<td>{{ item.id }}</td>
<td>{{ item.bookName }}</td>
<td>¥{{ item.price.toFixed(2) }}</td>
<td>{{ item.date }}</td>
<td>
<button
@click="decrement(index)"
v-bind:disabled="item.number <= 0"
>
-
</button>
<span>{{ item.number }}</span>
<button @click="increment(index)">+</button>
</td>
<td>
<button @click="remove(index)">移除</button>
</td>
</tr>
<tr>
<td colspan="3">总价格:¥{{totallyPrice.toFixed(2)}}</td>
</tr>
</table>
</div>
<div v-else>
购物车空空如也~
</div>
data() {
return {
safety: {
name: "安全监控",
},
tableData: [
{
id: 1,
bookName: "《数学》",
date: "2006-9",
price: 85,
number: 1,
},
{
id: 2,
bookName: "《语文》",
date: "2009-9",
price: 84,
number: 1,
},
{
id: 3,
bookName: "《英语》",
date: "2009-5",
price: 35,
number: 1,
},
],
};
},
methods: {
decrement(index) {
this.tableData[index].number--;
},
increment(index) {
this.tableData[index].number++;
},
remove(index) {
this.tableData.splice(index, 1);
},
},
computed:{
totallyPrice(){
let totallyPrice = 0;
for(let i = 0 ;i < this.tableData.length; i++){
totallyPrice += this.tableData[i].number * this.tableData[i].price;
}
return totallyPrice;
}
}