<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 800px;
height: 500px;
margin: 50px auto;
border: 1px solid #000;
text-align: center;
}
nav {
font-weight: 700;
font-size: 20px;
margin: 20px 0;
}
table {
/* 600px;
height: 300px; */
border: 2px solid rgb(231, 206, 206);
margin: 0 auto;
border-collapse: collapse;
}
table tr {
height: 30px;
width: 600px;
}
table th,
td {
border: 2px solid rgb(231, 206, 206);
padding: 10px;
}
p {
margin: 10px 0 0 100px;
text-align: left;
}
button {
padding: 0 5px;
}
.show {
text-align: center;
margin: 50px auto;
}
</style>
<body>
<div id="app">
<div v-if="trs.length">
<nav>图书购物车</nav>
<table>
<tr>
<th v-for="i in headers"> {{ i }} </th>
</tr>
<tr v-for="(item,index) in trs">
<td> {{ item.id }} </td>
<td> {{ item.name }} </td>
<td> {{ item.dates }} </td>
<!-- <td> {{ "￥"+item.price.toFixed(2) }} </td> -->
<!-- 可以直接在{{}} 里面用JS方法保留两个小数 .toFixed() 不过因为总价格也是这个格式 最好用过滤器如下-->
<td> {{ item.price | showPrice }} </td>
<!-- 过滤器在 moustache语法中的写法 | 过滤器名字 -->
<td> <button @click="decrement(index)"> - </button> {{ item.num }}
<button @click="increment(index)"> + </button> </td>
<td> <button @click="remove(index)">{{ item.operation }}</button> </td>
</tr>
</table>
<p>总价：{{ totalPrice | showPrice }} </p>
</div>
<div class="show" v-else>
<h1>购物车空空如也啦</h1>
</div>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
headers: [" ", "书籍名称", "出版日期", "价格", "购买数量", "操作"],
trs: [{
id: 1,
name: "《算法导论》",
dates: "2006-9",
price: 85,
num: 1,
operation: "移除"
}, {
id: 2,
name: "《UNIX编程艺术》",
dates: "2006-9",
price: 59,
num: 1,
operation: "移除"
}, {
id: 3,
name: "《编程珠玑》",
dates: "2006-9",
price: 45,
num: 1,
operation: "移除"
}, {
id: 4,
name: "《代码大全》",
dates: "2006-9",
price: 125,
num: 1,
operation: "移除"
}]
},
methods: {
decrement(index) {
if (this.trs[index].num > 1) {
this.trs[index].num--;
// let newnum = this.trs[index].num;
// this.sum = newnum * this.trs[index].price;
}
},
increment(index) {
this.trs[index].num++;
// let newnum = this.trs[index].num;
// this.sum = newnum * this.trs[index].price;
},
remove(index) {
this.trs.splice(index, 1)
}
},
filters: { // 过滤器
showPrice(price) {
return "￥" + price.toFixed(2);
}
},
computed: {
totalPrice() {
// 1.用基础for循环来遍历
// let totalPrice = 0;
// for (let i = 0; i < this.trs.length; i++) {
// totalPrice += this.trs[i].price * this.trs[i].num;
// }
// return totalPrice;
// 2.用 for in 遍历
// let totalPrice = 0;
// for (let i in this.trs) {
// totalPrice += this.trs[i].price * this.trs[i].num;
// }
// return totalPrice;
// 3.用for...of
// let totalPrice = 0; // 这里的i 就是当前数组元素的值
// for (let i of this.trs) {
// totalPrice += i.price * i.num;
// };
// return totalPrice;
// 用reduce做
let totalPrice = 0;
return this.trs.reduce(function(preValue, tr) {
return preValue += tr.price * tr.num;
}, 0)
}
}
})
</script>
</body>