Vue實(shí)現(xiàn)購物車功能
更新時(shí)間:2017年04月27日 11:09:43 作者:1178291141
本篇文章主要分享了Vue實(shí)現(xiàn)購物車功能的實(shí)例代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
效果圖:
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" rel="external nofollow" /> </head> <body> <div id="app" class="container"> <table class="table"> <thead> <tr> <th>產(chǎn)品編號(hào)</th> <th>產(chǎn)品名字</th> <th>購買數(shù)量</th> <th>產(chǎn)品單價(jià)</th> <th>產(chǎn)品總價(jià)</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item , index) in message"> <td @click="jia(index)">{{item.id}}</td> <td>{{item.name}}</td> <td> <button type="button" class="btn tn-primary" @click="subtract(index)">-</button> <input type="text" v-model="item.quantity"> <button type="button" class="btn tn-primary" @click="add(index)">+</button> </td> <td>{{item.price | filtermoney}}</td> <!--<td>{{arr[index].one}}</td>--> <td>{{item.price*item.quantity | filtermoney}}</td> <td> <button type="button" class="btn btn-danger" @click="remove(index)">移除</button> </td> </tr> <tr> <td>總購買價(jià) </td> <td> {{animatenum | filtermoney}} </td> <td>總購買數(shù)量 </td> <td> </td> <td colspan="2"> <button type="button" class="btn btn-danger" @click="empty()">清空購物車</button> </td> </tr> </tbody> </table> <p v-if="message.length===0">您的購物車為空</p> </div> <script src="https://unpkg.com/tween.js@16.3.4"></script> <script src="https://cdn.bootcss.com/vue/2.2.3/vue.min.js"></script> <script> var vm=new Vue({ el:"#app", data:{ totalPrice:0, animatenum:0, message:[ { id: 007, name: 'iphone5s', quantity: 3, price: 4000 },{ id: 1340, name: 'iphone5', quantity: 9, price: 3000 },{ id: 7758, name: 'imac', quantity: 4, price: 7000 },{ id: 2017, name: 'ipad', quantity: 5, price: 6000 } ] }, watch:{ toComput2:function(newValue,oldValue){ this.tween(newValue,oldValue); } }, computed:{ //計(jì)算總金額 toComput2:function(){ var vm=this; //每次進(jìn)來要重置總金額 vm.totalPrice=0; this.message.forEach(function(mess){ vm.totalPrice+=parseInt(mess.price*mess.quantity); }) return this.totalPrice; } }, filters:{ filtermoney:function(value){ return '¥'+value ; } }, mounted:function(){ this.tween('97000','0'); }, methods:{ //計(jì)算總數(shù)的方法為什么寫在methods里面就不行? toComput:function(){ var vm=this; vm.message.forEach(function(mess){ vm.totalPrice+=parseInt(mess.price*mess.quantity); }) return vm.totalPrice; }, add:function(index){ var vm=this; vm.message[index].quantity++; }, subtract:function(index){ var vm=this; vm.message[index].quantity--; if(vm.message[index].quantity<=0){ if (confirm("你確定移除該商品?")) { vm.message.splice(index,1) } } }, remove:function(index){ var vm=this; if (confirm("你確定移除該商品?")) { vm.message.splice(index,1) } }, empty:function(){ var vm=this; vm.message.splice(0,vm.message.length); }, jia:function(index){ var vm=this; vm.arr[index].one++; }, tween:function(newValue,oldValue){ var vm=this; var twen=new TWEEN.Tween({animatenum:oldValue}); function animate() { requestAnimationFrame(animate); TWEEN.update(); }; twen.to({animatenum:newValue},750); twen.onUpdate(function(){ //toFixed();保留幾位小數(shù) vm.animatenum = this.animatenum.toFixed(); }) twen.start(); animate(); } } }); </script> </body> </html>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
vue.js動(dòng)態(tài)修改background-image問題
這篇文章主要介紹了vue.js動(dòng)態(tài)修改background-image問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08使用 webpack 插件自動(dòng)生成 vue 路由文件的方法
這篇文章主要介紹了使用 webpack 插件自動(dòng)生成 vue 路由文件的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08Vue3新屬性之css中使用v-bind的方法(v-bind?in?css)
這篇文章主要介紹了Vue3新屬性css中使用v-bind(v-bind?in?css)的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01Vue echarts封裝組件需求分析與實(shí)現(xiàn)
在平常的項(xiàng)目中,echarts圖表我們也是使用的非常多的,通常我們從后端拿到數(shù)據(jù),需要在圖表上動(dòng)態(tài)的進(jìn)行呈現(xiàn),接下來我們就模擬從后端獲取數(shù)據(jù)然后進(jìn)行呈現(xiàn)的方法,這篇文章主要介紹了Vue echarts封裝組件需求分析與實(shí)現(xiàn)2022-10-10vue+element UI實(shí)現(xiàn)樹形表格帶復(fù)選框的示例代碼
這篇文章主要介紹了vue+element UI實(shí)現(xiàn)樹形表格帶復(fù)選框的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04