图书购物车
2022-02-24 本文已影响0人
小圆圈Belen
显示图书购物车界面，移除所有书籍之后，显示购物车为空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
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: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
</style>
</head>
<!--需求描述：图书购物车-->
<body>
<div id= 'vue' >
<div v-if="books.length>0">
<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" :key="item.id">
<th>{{item.id}}</th>
<th>{{item.name}}</th>
<th>{{item.date}}</th>
<!-- <th>{{getFinalPrice(item.price)}}</th>-->
<th>{{item.price | showPrice}}</th>
<th>
<button @click="sub(index)" :disabled="item.count<=1">-</button>
{{item.count}}
<button @click="add(index)">+</button>
</th>
<th>
<button @click="remove(index)">移除</button>
</th>
</tr>
</tbody>
</table>
<h4>总价：{{totalPrice | showPrice}}</h4>
</div>
<h3 v-else>购物车为空</h3>
</div>
<script>
let vm = new Vue({
el: '#vue',
data:{
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: '2008 - 10',
price: 39.00,
count: 1,
},
{
id: 4,
name: '代码大全',
date: '2006 - 3',
price: 128.00,
count: 1,
}
],
sum: 0
},
methods:{
getFinalPrice(price){
return '¥ '+ price.toFixed(2)
},
add(index){
this.books[index].count++
},
sub(index){
this.books[index].count--
},
remove(index){
this.books.splice(index,1),
console.log('移除了第' + index + '个元素')
}
},
computed:{
totalPrice(){
let sum = 0
for(let i=0;i<this.books.length;i++){
sum += this.books[i].price * this.books[i].count
}
return sum
}
},
filters:{
showPrice(price){
return '¥ '+ price.toFixed(2)
}
}
})
</script>
</body>
</html>
