index.html:
<body>
<div id="app">
<div v-if="books.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 books">
<!-- <td v-for="value in item">{{value}}</td> -->
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<!-- 直接算 -->
<!-- <td>{{‘￥‘ + item.price.toFixed(2)}}</td> -->
<!-- 使用methods -->
<!-- <td>{{getFinalPrice(item.price)}}</td> -->
<!-- 使用过滤器 -->
<td>{{item.price | showPrice}}</td>
<td>
<!-- disabled 如果为true则不能再点击 -->
<button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
{{item.count}}
<button @click="increment(index)">+</button>
</td>
<td>
<button @click="removeHandle(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<h2>总价格: {{totalPrice | showPrice}}</h2>
</div>
<div v-else>
<h2>购物车为空</h2>
</div>
</div>
<!-- 要用的一定要放在前面！！！！ -->
<script src="../../js/vue.js"></script>
<script src="./main.js"></script>
</body>
main.js:
const app = new Vue({ el: ‘#app‘, data: { books: [ { id: 1, name: ‘book1‘, date: ‘2006-9‘, price: 10.00, count: 1 }, { id: 2, name: ‘book2‘, date: ‘2009-9‘, price: 20.00, count: 1 }, { id: 3, name: ‘book3‘, date: ‘2016-9‘, price: 30.00, count: 1 }, { id: 4, name: ‘book4‘, date: ‘2019-9‘, price: 40.00, count: 1 }, ] }, methods: { getFinalPrice(price){ return ‘￥‘ + price.toFixed(2); }, decrement(index){ // console.log("decrement"); this.books[index].count-- }, increment(index){ // console.log("increment"); this.books[index].count++ }, removeHandle(index){ this.books.splice(index, 1) } }, computed: { totalPrice(){ let totalPrice = 0; for(let i in this.books){ totalPrice += this.books[i].count * this.books[i].price; } return totalPrice; } }, filters: { showPrice(price){ return ‘￥‘ + price.toFixed(2); } } })
style.css:
table { border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th, td{ padding: 8px 16px; border: 1px solid #e9e9e9; text-align: left; } th{ background-color: #f7f7f7; color: #5c6b77; font-weight: 600; }
原文：https://www.cnblogs.com/smallstars/p/13199697.html