Vue.js-購物車案例
阿新 • • 發佈：2021-10-28
1.1 專案目錄
1.2 index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>購物車案列</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> <td>{{item.price | showPrice}}</td> <td> <button @click="decrement(index)" :disabled="item.count <= 0">-</button> {{item.count}} <button @click="increment(index)">+</button> </td> <td> <button @click="removeHandle(index)">移除</button> </td> </tr> </tbody> </table> <h3>總價格:{{totalPrice | showPrice}}</h3> </div> <h3 v-else>購物車為空</h3> </div> </body> <!--引入vue--> <script src="../js/vue.js"></script> <!--引入main.js檔案--> <script src="main.js"></script> </html>
1.3 style.css
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-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
1.4 main.js
const app = new Vue({ el: '#app', 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 }, ] }, // 方法 methods: { // 加操作 increment(index) { this.books[index].count++ }, // 減操作 decrement(index) { this.books[index].count-- }, // 移除操作 removeHandle(index){ this.books.splice(index,1) } }, // 計算屬性 computed: { // 定義總價格函式 totalPrice(){ // 設定總價格為空 let totalPrice = 0; // 方式 1遍歷迴圈 /* for(let i=0; i<this.books.length; i++){ totalPrice += this.books[i].price * this.books[i].count; } */ // 方式2 遍歷迴圈 /* for(let i in this.books){ totalPrice += this.books[i].price * this.books[i].count; } */ // 方式3 遍歷迴圈 /* for (let item of this.books){ totalPrice += item.price * item.count; }*/ // 返回總價格 // return totalPrice; // 方式四 通過高階函式實現 return this.books.reduce(function (preValue,book){ return preValue + book.price * book.count },0) } }, // 過濾器 filters: { showPrice(price){ return '¥' + price.toFixed(2); } } })
執行結果