总价格(书本单价×书本数量)
html
<div id="table">
<!--如果该数组仍存在长度,则显示v-if内的内容-->
<div v-if="books.length">
<table>
<thead>
<!--只有一行 tr-->
<tr>
<!--th为列-->
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<!--
<td>{{getFinalPrice(item.price)}}</td>
-->
<td>{{item.price | showPrice}}</td>
<td><button @click="decrement(index)" v-bind:disabled="item.count<=1">-</button>
{{item.count}}
<button @click="increment(index)">+</button>
</td>
<td><button @click="removeClick(index)">移除</button></td>
</tr>
</tbody>
</table>
<h3>总价格:{{totalPrice | showPrice}}</h3>
</div>
<h2 v-else>购物车为空</h2>
</div>
第一种
totalPrice () {
let totalPrice = 0
for (let i = 0; i < this.books.length; i++) {
totalPrice += this.books[i].price * this.books[i].count
}
return totalPrice
第二种
totalPrice () {
let totalPrice=0
for (let i in this.books){
const book = this.books[i]
totalPrice +=book.price * book.count
}
return totalPrice
}
}
第三种
let totalPrice=0
for (let item of this.books){
totalPrice +=item.price * item.count
}
// return this.books.reduce(function (preValue, book){
// return preValue + book.price * book.count}, 0)
// }