Vue實現(xiàn)購物車實例代碼兩則
一、第一種比較簡單
效果圖
實現(xiàn)代碼：
<!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實現(xiàn)的簡單響應式購物車案例
實現(xiàn)結果
如上，所有書類數(shù)據(jù)存在數(shù)組里，遍歷顯示在表格中，點擊+和-可以實現(xiàn)數(shù)量和總價格的響應式變化，其中，減號到1時便添加了disabled類型，無法點擊。 價格顯示時通過過濾器顯示的，加上Z￥符號和兩位小數(shù)。項目結構為三個文件。
index.html
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <link rel='stylesheet' href='http://m.cgvv.com.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>購買數(shù)量</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://m.cgvv.com.cn/js/vue.js'></script><script src='http://m.cgvv.com.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實現(xiàn)購物車實例代碼的文章就介紹到這了,更多相關Vue 購物車內容請搜索好吧啦網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
1. CSS百分比padding制作圖片自適應布局2. HTML5實戰(zhàn)與剖析之觸摸事件(touchstart、touchmove和touchend)3. CSS清除浮動方法匯總4. React優(yōu)雅的封裝SvgIcon組件示例5. 不要在HTML中濫用div6. HTTP協(xié)議常用的請求頭和響應頭響應詳解說明（學習）7. TypeScript實現(xiàn)十大排序算法之歸并排序示例詳解8. Electron調用外接攝像頭并拍照上傳實現(xiàn)詳解9. HTML DOM setInterval和clearInterval方法案例詳解10. vue前端RSA加密java后端解密的方法實現(xiàn)
網公網安備