效果图:
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="external nofollow" /> </head> <body> <div id="app" class="container"> <table class="table"> <thead> <tr> <th>产品编号</th> <th>产品名字</th> <th>购买数量</th> <th>产品单价</th> <th>产品总价</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>总购买价 </td> <td> {{animatenum | filtermoney}} </td> <td>总购买数量 </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:{ //计算总金额 toComput2:function(){ var vm=this; //每次进来要重置总金额 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:{ //计算总数的方法为什么写在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();保留几位小数 vm.animatenum = this.animatenum.toFixed(); }) twen.start(); animate(); } } }); </script> </body> </html>
页面预览地址:http://code.ymotel.cn/olview.view/1IufJhL9a2C/index.html
相关推荐
本文实例为大家分享了vue实现商城购物车功能的具体代码,供大家参考,具体内容如下 首先,先上最终的效果图 效果并不是很好看,但是这不是重点。 首先,我们先看下布局: 购物车 (item,index)> ...
用vue实现购物车功能,具体功能主要以下 1全选全不选 2商品数量添加减少 3自动计算勾选商品的总金额
vue实现购物车功能(商品分类).docx
本文实例为大家分享了vue实现购物车功能的具体代码,供大家参考,具体内容如下 new Vue({ el: "#app", data: { cIndex: 0, lists: [ { title: "推荐商品", goods: [ { id: 0, img: './images/goods.png',...
本文实例为大家分享了vue实现购物车小案例的具体代码,供大家参考,具体内容如下 最终效果 HTML部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
vue实现购物车单页面应用,实现了vue基础的功能开发,适合入门学习
vue实现购物车选择功能.docx
vue购物车模板,功能齐全,使用方便
vue实现商品列表添加购物车,编辑购物车功能
Vue2.0实现购物车地址选配功能,unit目录是未添加的,可以在它的基础上练习
vue实现购物车全部功能的简单方法.docx
这是一个Vue实例,其主要实现一个简单的购物车功能。用于实践Vue的数据绑定,条件,循环,父子通信,组件化等功能。 这个实例详细的实现说明,可查看博客:...
Vue实现简单购物车功能 本文实例为大家分享了Vue实现简单购物车功能的具体代码,供大家参考,具体内容如下 话不多少,上效果图 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
本文实例为大家分享了Vue实现购物车结算功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
vue仿饿了么购物车
主要介绍了vue实现购物车结算功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
利用vue搭建购物车页面webpack打包vue,js文件,共享数据双向绑定,全选和反选以及计算功能