the code
<div id="app">
<div v-if="list.length">
<table>
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
<td>{
{item.date}}</td>
<td>{
{item.price|shouwPrice}}</td>
<td>
<button @click="jian(index)" v-bind:disabled="item.count <=1">-</button>
{
{item.count}}
<button @click="jia(index)">+</button>
</td>
<td><button @click="yichu">移除</button></td>
</tr>
</tbody>
</table>
<h2>总价格{
{totalPrice|shouwPrice}}</h2>
</div>
<h2 v-else>购物车为空</h2>
</div>
methods: {
jian(index) {
this.list[index].count--
},
jia(index) {
this.list[index].count++
},
yichu(index) {
this.list.splice(index, 1)
}
},
filters: {
shouwPrice(price) {
return '¥' + price.toFixed(2)
}
},
computed: {
totalPrice() {
let totalPrice = 0
for (let i = 0; i < this.list.length; i++) {
totalPrice += this.list[i].price * this.list[i].count
}
return totalPrice
}
}
- In the data, each data of the four books is defined
data: {
list: [{
id: 1,
name: '三国演义',
date: '2009-6',
price: 85.00,
count: 1
},
}
Effect