Vue實現購物車實例代碼兩則
一、第一種比較簡單
效果圖
實現代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>購物車案例</title> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script></head><style> *{ padding: 0; margin:0 } ul li{ width: 1200px; display: flex; align-items: center; justify-content: center; } li div,.total{ display: inline-block; width:200px; height: 50px; line-height: 50px; text-align: center; } button{ width: 60px; height: 40px; text-align: center; line-height: 40px; }</style><body> <div id='app'> <ul> <goodsitem v-for='item in goodslist' :item='item' :key='item.id' @onchange='(type)=>{handleCount(type,item)}' @ondelete='()=>{handleDelete(item.id)}'> </goodsitem> <div style='padding-left: 113px'>總價:{{total}}</div> </ul> </div></body><script> var computed={ props:{ count:{ type:Number, require:true } }, methods:{ handleCount(type){ this.$emit(’onchange’,type) } }, template:`<div style='width:200px'> <button @click='handleCount(’sub’)'>-</button> <span>{{count}}</span> <button @click='handleCount(’add’)' >+</button> </div> ` } var goodsitem={ props:{ item:{ type:Object, require:true } }, methods:{ handleCount(type){ this.$emit(’onchange’,type) }, handleDelete(){ this.$emit(’ondelete’) } }, components:{ computed }, template:`<li> <div>{{item.goodsName}}</div> <div>{{item.price}}</div> <computed :count='item.count' @onchange='handleCount'></computed> <div>{{item.sum}}</div> <div><button @click='handleDelete'>刪除</button></div> </li> ` } var app=new Vue({ el:'#app', data:{ goodslist:[{ id:1, goodsName:'小可愛', price:100, count:1, sum:100 },{ id:2, goodsName:'小可愛', price:200, count:2, sum:400 },{ id:3, goodsName:'小可愛', price:300, count:3, sum:900 },{ id:4, goodsName:'小可愛', price:400, count:1, sum:400 }, ] }, methods:{ handleCount(type,item){ if(type==’add’){ item.count+=1 }else{ if(item.count==1){ this.handleDelete(item.id) return } item.count-=1 } item.sum=item.count*item.price }, handleDelete(id){ return this.goodslist=this.goodslist.filter((item)=>{ return id!=item.id }) } }, computed:{ total(){ return this.goodslist.reduce((total,item)=>{ return total+=item.sum },0) } }, components:{ goodsitem } })</script></html>
二、一個用vue實現的簡單響應式購物車案例
實現結果
如上，所有書類數據存在數組里，遍歷顯示在表格中，點擊+和-可以實現數量和總價格的響應式變化，其中，減號到1時便添加了disabled類型，無法點擊。 價格顯示時通過過濾器顯示的，加上Z￥符號和兩位小數。項目結構為三個文件。
index.html
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <link rel='stylesheet' href='http://www.aoyou183.cn/bcjs/style.css' rel='external nofollow' ></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 v-for='value in item'>{{value}}</td>--> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <!--<td>{{getFinalPrice(item.price)}}</td> 下面是過濾器語法--> <td>{{item.price | showPrice}}</td> <td> <button @click='increment(index)' v-bind:disabled='item.count<=1'>-</button> {{item.count}} <button @click='decrement(index)'>+</button> </td> <td> <button @click='removeHandler(index)'>移除</button> </td> </tr> </tbody> </table> <h2>總價格: {{totalprice | showPrice}}</h2> </div> <h2 v-else> 購物車為空</h2></div><script src='http://www.aoyou183.cn/js/vue.js'></script><script src='http://www.aoyou183.cn/bcjs/main.js'></script><script></script></body></html>
main.js
const app = new Vue({ el:'#app', data: { books: [ { id: 1, name: ’算法導論’, date: ’2019-01-10’, price: 85.00, count: 1 }, { id: 2, name: ’計算機導論’, date: ’2019-02-14’, price: 90.00, count: 2 }, { id: 3, name: ’科學導論’, date: ’2019-09-10’, price: 85.21, count: 1 }, { id: 4, name: ’網絡導論’, date: ’2019-08-21’, price: 19.02, count: 1 }, ] }, methods:{ getFinalPrice(price) { return ’$’ + price.toFixed(2) }, increment(index){ /*if(this.books[index].count <= 1) return*/ this.books[index].count-- }, decrement(index){ this.books[index].count++ }, removeHandler(index){ this.books.splice(index,1) } }, filters:{ showPrice(price){ return ’$’ + price.toFixed(2) } }, computed:{ totalprice(){ let tprice = 0 for(let i = 0; i< this.books.length; i++) { tprice += this.books[i].price * this.books[i].count } return tprice } }})
style.css
table{ border: 1px solid #e9e9e9; border-collapse: collapse; bordre-spacing: 0;}th, td { padding: 8px 16px; border: 1px solid #e9e9e9; text-align: left;}th{ backgroud-color: #f7f7f7; color: #5c6b77; font-weight: 600;}
到此這篇關于Vue實現購物車實例代碼的文章就介紹到這了,更多相關Vue 購物車內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備