Html代码
Title
<div id="app">
<div>
<table><tr><th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr><tr><td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | showPrice}}</td>
<td>
-
{{item.count}}
+
</td>
<td>
移除
</td>
</tr></table><h2>总价格:{{totalPrice}}</h2>
</div>
<div>
<h2>购物车为空!</h2>
</div>
</div>
JS代码
const app = new Vue({
el: '#app',
data:{
Books:[
{id:1,name:'计算机原理',date:'2015-6',price:50,count:1},
{id:2,name:'认识Python',date:'2016-1',price:100,count:1},
{id:3,name:'你好,易语言',date:'2015-9',price:200,count:1},
{id:4,name:'你好,Vue',date:'2013-6',price:100,count:1},
{id:5,name:'认识Javascprit',date:'2020-6',price:50,count:1},
]
},
methods:{
increment(index){
this.Books[index].count++
},
decrement(index){
this.Books[index].count--
},
removeHandle(index){
this.Books.splice(index,1)
}
},
computed:{
totalPrice(){
let totalPrice=0
for (let i = 0 ;i