html
<body>
<div id="app">
<div v-if="books.length">
<table>
<tr>
<th> 序列 </th>
<th> 名称 </th>
<th> 日期 </th>
<th> 价格 </th>
<th> 数量 </th>
<th> 操作 </th>
</tr>
<tbody>
<tr v-for="(item ,index) in books">
<td> {{item.id}} </td>
<td> {{item.name}} </td>
<td> {{item.date}} </td>
<td> {{ item.price | showPrice}} </td>
<td>
<button @click="decrement(index)" v-bind:disabled="item.count <= 0">-</button>
{{item.count}}
<button @click="add(index)">+</button>
</td>
<td>
<button @click="removeClick (index)">移除</button>
</td>
</tr>
</tbody>
</table>
<h3 class="sum">总价格 {{ totalPrice | showPrice}} </h3>
</div>
<h2 v-else>购物车为空</h2>
</div>
<script src="../js/vue.js"></script>
<script src="index.js"></script>
</body>
CSS
style>
table {
margin: 100px auto;
border: 1px solid #ccc;
border-collapse: collapse;
border-style: 0;
}
th,
td {
padding: 8px 16px;
border: 1px solid #ccc;
text-align: left;
}
th {
background-color: pink;
color: blue;
font-weight: 700;
}
.sum {
margin-top: -90px;
margin-left: 670px;
}
</style>
vue js
const app = new Vue({
el: '#app',
data: {
books: [
{
id: 1,
name: '算法导论',
date: '2006-9',
price: 85.00,
count: 1
}, {
id: 2,
name: 'UNIX编程艺术',
date: '2006-2',
price: 59.99,
count: 1
}, {
id: 3,
name: '编程珠玑',
date: '2008-10',
price: 39.00,
count: 1
}, {
id: 4,
name: '代码大全',
date: '2006-3',
price: 128.88,
count: 1
}, {
id: 5,
name: '斗破苍穹',
date: '2006-1',
price: 111.11,
count: 1
}
],
},
methods: {
decrement(index) {
this.books[index].count--
},
add(index) {
this.books[index].count++
},
removeClick(index) {
this.books.splice(index, 1)
}
},
computed: {
totalPrice() {
let totalPrice = 0
for (let i = 0; i < this.books.length; i++) {
totalPrice += this.books[i].price * this.books[i].count
}
return totalPrice
}
},
filters: {
showPrice(price) {
return '¥' + price.toFixed(2)
}
}
})