vue_購物車案例
阿新 • • 發佈：2021-10-13
寫在部落格前的話：
- 保留兩位小數使用的是
.toFixed(2)方法 - 動態繫結
v-bind:disabled='item.count <=1 '來判斷按鈕是否可點選 - 按鈕的動態使用index去判定
思路：
-
表格的建立，表頭，迴圈遍歷js中的陣列
-
實現過濾器新增￥與實現小數點後兩位
-
實現加減按鈕的點選，動態繫結實現按鈕小於2之後不可點選
-
實現刪除操作，使用split(index,1)方法
-
實現總價的計算，使用computed屬性
預覽：
程式碼演示：
html 框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="style.css"> </head> <body> <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>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <!--保留兩位小數使用的是 .toFixed(2)方法--> <td>{{item.price | showPrice}}</td> <td> <!-- 動態繫結v-bind:disabled='item.count <=1 '來判斷按鈕是否可點選--> <button @click="btnSubClick(index)" :disabled="item.count <= 1">-</button> {{item.count}} <button @click="btnAddClick(index)">+</button> </td> <td><button @click="removeHandle">移除</button></td> </tr> </tbody> </table> <h2>總價格為：{{totalPrice | showPrice}}</h2> </div> <div v-else>購物車為空</div> </div> <script src="../js/vue.js"></script> <script src="main.js"></script> </body> </html>
css 樣式
table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; /*margin: 0 auto; // 表格居中*/ } th,td{ padding: 8px 16px; border: 1px solid #e9e9e9; /*text-align: left;*/ text-align: center; } th{ background-color: #f7f7f7; color: #5c6b77; font-weight: 600; }
js 程式碼
把最實用的經驗，分享給最需要的讀者，希望每一位來訪的朋友都能有所收穫！const app = new Vue({ el: '#app', data:{ books:[ { id:1, name: '《哈利波特I》', date:'2006-06', price:85.00, count:1 }, { id:2, name: '《哈利波特II》', date:'2007-08', price:59.00, count:1 }, { id:3, name: '《哈利波特III》', date:'2008-09', price:36.00, count:1 }, { id:4, name: '《哈利波特IV》', date:'2009-10', price:69.00, count:1 }, { id:5, name: '《哈利波特V》', date:'2010-12', price:51.00, count:1 } ] }, computed:{ totalPrice(){ let totalPrice = 0; for (let i = 0;i<this.books.length;i++){ totalPrice += this.books[i].price * this.books[i].count } return totalPrice } }, methods:{ // getFinalPrice(price){ // return '￥' + price.toFixed(2) // } btnAddClick(index){ this.books[index].count++; // console.log(index); }, btnSubClick(index){ // if (this.books[index].count > 0){ this.books[index].count--; // console.log(index); // } }, removeHandle(index){ this.books.splice(index,1) } }, filters:{ showPrice(price){ return '￥' + price.toFixed(2) } } })