<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>