Vue實現簡易購物車案例
本文實例為大傢分享瞭Vue實現簡易購物車的具體代碼,供大傢參考,具體內容如下
先來看一下完成後的效果吧。
CSS 部分
這裡沒什麼好說的,就是v-cloak 這一個知識點
table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th,td{ padding: 8px 16px; border: 1px solid #e9e9e9; text-align: center; } th{ background-color: #f7f7f7; color: #5c6b77; font-weight: 600; } [v-cloak]{ display: none; }
HTML部分
這裡說明一些用到的一些Vue的知識點:
- v-if
- v-for
- v-cloak
- v-on > @
- v-bind > :
- 方法 methods
- 計算屬性 computed
- 過濾器 filters
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>購物車</title> <link rel="stylesheet" href="style.css" > </head> <body> <div id="app" v-cloak> <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"> <th>{{item.id}}</th> <th>{{item.name}}</th> <th>{{item.date}}</th> <!--方案一 保留小數點和貨幣符號--> <!-- <th>{{"¥"+item.price.toFixed(2)}}</th> --> <!--方案二--> <!-- <th>{{getFinalPrice(item.price)}}</th> --> <!--方案三--> <th>{{item.price | showPrice}}</th> <th> <button @click="decrement(index)" :disabled="item.count<=0">-</button> {{item.count}} <button @click="increment(index)">+</button> </th> <th><button @click="removeHandle(index)">移除</button></th> </tr> </tbody> </table> <h2>總價格:{{totalPrice | showPrice}}</h2> </div> <h2 v-else> 購物車為空 </h2> </div> </body> <script src="../js/vue.js"></script> <script src="main.js"></script> </html>
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:50.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: { //這裡我們放棄使用方法的形式來求總價格,轉而使用計算屬性,因為它的效率更高。 // getFinalPrice(price){ // return "¥"+price.toFixed(2) // }, increment(index){ this.books[index].count++ }, decrement(index){ this.books[index].count-- }, removeHandle(index){ this.books.splice(index,1); } }, computed: { totalPrice(){ // 方案一:普通的for循環 // let totalPrice = 0; // for(let i=0;i<this.books.length;i++){ // totalPrice += this.books[i].price * this.books[i].count // } // return totalPrice // 方案二:for in // let totalPrice = 0; // for(let i in this.books){ // // console.log(i);//1 2 3 4 // totalPrice += this.books[i].price * this.books[i].count // } // return totalPrice // 方案三:for of // let totalPrice = 0; // for(let item of this.books){ // // console.log(item);//這裡拿到的就是數組裡的每個對象 // totalPrice += item.price * item.count // } // return totalPrice // 方案四:reduce return this.books.reduce(function (preValue, book) { // console.log(book);//分別輸出四個對象 return preValue + book.price * book.count }, 0) } }, // 過濾器 filters:{ showPrice(price){ return "¥"+price.toFixed(2) } } })
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。