<!DOCTYPE?html>
<html?lang="zh-CN">
<head>
??<meta?charset="UTF-8">
??<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
??<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
??<title>Document</title>
??<script?src="https://cdn.staticfile.org/vue/2.6.12/vue.min.js"></script>
??<style>
????table,tr,th,td{
??????border:?darkgrey?solid?2px;
??????border-collapse:?collapse;
????}
??</style>
</head>
<body>
??<div?id="app">
????<div?v-if='books.length'>
??????<table>
????????<thead>
??????????<tr>
????????????<th></th>
????????????<th>書(shū)籍名</th>
????????????<th>出版日期</th>
????????????<th>價(jià)格</th>
????????????<th>購(gòu)買(mǎi)數(shù)量</th>
????????????<th>操作</th>
??????????</tr>
????????</thead>?
????????<tbody>
??????????<tr?v-for='(item,index)?in?books'>
????????????<td>{{item.id}}</td>
????????????<td>{{item.name}}</td>
????????????<td>{{item.itime}}</td>
????????????<!--?<td>{{getFinalPrice(item.price)}}</td>?-->
????????????<td>{{item.price?|?showPrice}}</td>
????????????<td>
??????????????<!--?<button?@click='down(item.nub--)'>-</button>?-->
??????????????<button?@click='decrement(index)'?v-bind:disabled='item.nub?<=1'>-</button>
??????????????{{item.nub}}
??????????????<!--?<button?@click='up(item.nub++)'>+</button>?-->
??????????????<button?@click='increment(index)'>+</button>
????????????</td>
????????????<td>
??????????????<button?@click='remove(index)'>移除</button>
????????????</td>
??????????</tr>
????????</tbody>
???????</table>
???????<span>總價(jià)：{{totalPrice?|?showPrice}}</span>
????</div>
????<h2?v-else>購(gòu)物車(chē)為空</h2>
??</div>
??<script>
????const?vm=new?Vue({
??????el:'#app',
??????data:{
????????books:?[
??????????{?id:?1,?name:?"1",?itime:?new?Date().toLocaleDateString(),?price:?"44"?,nub:?45?},
??????????{?id:?2,?name:?"2",?itime:?new?Date().toLocaleDateString(),?price:?"45"?,nub:?56?},
??????????{?id:?3,?name:?"3",?itime:?new?Date().toLocaleDateString(),?price:?"46"?,nub:?66?},
??????????{?id:?4,?name:?"4",?itime:?new?Date().toLocaleDateString(),?price:?"47"?,nub:?88?}
????????]
??????},?
??????methods:{
????????//?down?()?{},
????????//?up?()?{},
????????//?getFinalPrice(price)?{
????????//???return?'￥'+?Number(price).toFixed(2)
????????//?}
??????????increment(index)?{
????????????this.books[index].nub?=?this.books[index].nub?+?1
??????????},
??????????decrement(index)?{
????????????this.books[index].nub--
??????????},
??????????remove(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].nub
??????????}
??????????return?totalPrice;
????????}
??????},
??????filters:?{
????????showPrice(price)?{
??????????return?'￥'?+Number(price).toFixed(2)
????????}
??????}
????});
??</script>
</body>
</html>
