Vue實(shí)現(xiàn)購(gòu)物車實(shí)例代碼兩則
一、第一種比較簡(jiǎn)單
效果圖
實(shí)現(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>購(gòu)物車案例</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'>總價(jià):{{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:'小可愛(ài)', price:100, count:1, sum:100 },{ id:2, goodsName:'小可愛(ài)', price:200, count:2, sum:400 },{ id:3, goodsName:'小可愛(ài)', price:300, count:3, sum:900 },{ id:4, goodsName:'小可愛(ài)', 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>
二、一個(gè)用vue實(shí)現(xiàn)的簡(jiǎn)單響應(yīng)式購(gòu)物車案例
實(shí)現(xiàn)結(jié)果
如上，所有書(shū)類數(shù)據(jù)存在數(shù)組里，遍歷顯示在表格中，點(diǎn)擊+和-可以實(shí)現(xiàn)數(shù)量和總價(jià)格的響應(yīng)式變化，其中，減號(hào)到1時(shí)便添加了disabled類型，無(wú)法點(diǎn)擊。 價(jià)格顯示時(shí)通過(guò)過(guò)濾器顯示的，加上Z￥符號(hào)和兩位小數(shù)。項(xiàng)目結(jié)構(gòu)為三個(gè)文件。
index.html
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <link rel='stylesheet' href='http://m.b3g6.com/bcjs/style.css' rel='external nofollow' ></head><body><div id='app'> <div v-if='books.length'> <table> <thead> <tr> <th></th> <th>書(shū)籍日期</th> <th>出版日期</th> <th>價(jià)格</th> <th>購(gòu)買數(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> 下面是過(guò)濾器語(yǔ)法--> <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>總價(jià)格: {{totalprice | showPrice}}</h2> </div> <h2 v-else> 購(gòu)物車為空</h2></div><script src='http://m.b3g6.com/js/vue.js'></script><script src='http://m.b3g6.com/bcjs/main.js'></script><script></script></body></html>
main.js
const app = new Vue({ el:'#app', data: { books: [ { id: 1, name: ’算法導(dǎo)論’, date: ’2019-01-10’, price: 85.00, count: 1 }, { id: 2, name: ’計(jì)算機(jī)導(dǎo)論’, date: ’2019-02-14’, price: 90.00, count: 2 }, { id: 3, name: ’科學(xué)導(dǎo)論’, date: ’2019-09-10’, price: 85.21, count: 1 }, { id: 4, name: ’網(wǎng)絡(luò)導(dǎo)論’, 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;}
到此這篇關(guān)于Vue實(shí)現(xiàn)購(gòu)物車實(shí)例代碼的文章就介紹到這了,更多相關(guān)Vue 購(gòu)物車內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. JavaScript實(shí)現(xiàn)簡(jiǎn)單的彈窗效果2. Vue 實(shí)現(xiàn)對(duì)quill-editor組件中的工具欄添加title3. javascript實(shí)現(xiàn)貪吃蛇小練習(xí)4. 我所理解的JavaScript中的this指向5. Java commons-httpclient如果實(shí)現(xiàn)get及post請(qǐng)求6. js實(shí)現(xiàn)碰撞檢測(cè)7. PHP驗(yàn)證碼工具－Securimage8. PHP單件模式和命令鏈模式的基礎(chǔ)知識(shí)9. 一文帶你徹底理解Java序列化和反序列化10. PHP利用curl發(fā)送HTTP請(qǐng)求的實(shí)例代碼
網(wǎng)公網(wǎng)安備