效果展示:
核心代码如下:
<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>{{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="removeHandler(index)">移除</button></td>
</tr>
</tbody>
</table>
<h2>总价格:{{totalPrice | showPrice}}</h2>
</div>
<h2 v-else>购物车已清空!</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
isShow:true,
books:[
{
id:1,
name:'《算法导论》',
date:'2006-9',
price:85.00,
count:1
},
{
id:2,
name:'《UNIX编程艺术》',
date:'2006-2',
price:59.00,
count:1
},
{
id:3,
name:'《编程珠玑》',
date:'2006-9',
price:39.00,
count:1
},
{
id:4,
name:'《代码大全》',
date:'2008-10',
price:128.00,
count:1
}
]
},
methods:{
getFinalPrice(price){
return '¥' + price.toFixed(2);
},
increment(index){
this.books[index].count++;
},
decrement(index){
this.books[index].count--;
},
removeHandler(index){
this.books.splice(index,1);
}
},
computed:{
totalPrice(){
return this.books.reduce(function(preValue,book){
return preValue + book.count * book.price
},0)
},
},
filters:{//过滤器
showPrice(price){
return '¥' + price.toFixed(2)
}
}
})
</script>
免费下载连接: 购物车案例https://download.csdn.net/download/A____t/85147759?spm=1001.2014.3001.5503