电脑网页打不开建设银行网站,手机建站图片,网站开发用什么写得比较好,深圳网站建设价格是多少用Vue实现购物车。
程序详解#xff1a; 页面要显示商品的基本信息#xff08;编号#xff0c;名称#xff0c;单价#xff0c;购买数量#xff0c;总价等#xff09; 1.增加和减少商品数量 2.商品金额会随数量变化 3.会自动计算总金额 4.对某一类商品进行移除操作 5.还…用Vue实现购物车。
程序详解 页面要显示商品的基本信息编号名称单价购买数量总价等 1.增加和减少商品数量 2.商品金额会随数量变化 3.会自动计算总金额 4.对某一类商品进行移除操作 5.还有清空购物车
效果演示
原始样式 增加iphone5s和macbook的数量都为5则总价随之变化 移除iphone5s这一类商品 点击清空购物车按钮 看了上面的演示有没有心动的感觉呢
代码演示
导入三个文件
headmeta charsetutf-8link relstylesheet hrefhttps://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css relexternal nofollow /script srchttps://unpkg.com/tween.js16.3.4/scriptscript srchttps://cdn.bootcss.com/vue/2.2.3/vue.min.js/script/headbody内容
bodydiv idall classcontainertable classtabletheadtrth产品编号/thth产品名字/thth购买数量/thth产品单价/thth产品总价/thth操作/th/tr/theadtbodytr v-for(item , index) in messagetd clickjia(index){{item.id}}/tdtd{{item.name}}/tdtdbutton typebutton classbtn tn-primary clicksubtract(index)-/buttoninput typetext v-modelitem.quantitybutton typebutton classbtn tn-primary clickadd(index)/button/tdtd{{item.price | filtermoney}}/tdtd{{item.price*item.quantity | filtermoney}}/tdtdbutton typebutton classbtn btn-danger clickremove(index)移除/button/td/trtrtd总购买价/tdtd{{animatenum | filtermoney}}/tdtd总购买数量/tdtd/tdtd colspan2button typebutton classbtn btn-danger clickempty()清空购物车/button/td/tr/tbody/tablep v-ifmessage.length0您的购物车为空/p/div/bodyVue代码
scriptvar vm new Vue({el: #all,data: {totalPrice: 0,animatenum: 0,message: [{id: 1003,name: iphone5s,quantity: 1,price: 3000}, {id: 1009,name: iphone11,quantity: 3,price: 8000}, {id: 1024,name: macbook,quantity: 1,price: 15000}, {id: 2019,name: ipad pro,quantity: 2,price: 7000}]},watch: {Computer: function(newValue, oldValue) {this.tween(newValue, oldValue);}},computed: {Computer: 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(49000, 0);},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() {vm.animatenum this.animatenum.toFixed();})twen.start();animate();}}});/script如果看上面分步代码有点疑惑的话看下面总体代码
总体代码展示
!DOCTYPE html
htmlheadmeta charsetutf-8link relstylesheet hrefhttps://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css relexternal nofollow /script srchttps://unpkg.com/tween.js16.3.4/scriptscript srchttps://cdn.bootcss.com/vue/2.2.3/vue.min.js/script/headbodydiv idall classcontainertable classtabletheadtrth产品编号/thth产品名字/thth购买数量/thth产品单价/thth产品总价/thth操作/th/tr/theadtbodytr v-for(item , index) in messagetd clickjia(index){{item.id}}/tdtd{{item.name}}/tdtdbutton typebutton classbtn tn-primary clicksubtract(index)-/buttoninput typetext v-modelitem.quantitybutton typebutton classbtn tn-primary clickadd(index)/button/tdtd{{item.price | filtermoney}}/tdtd{{item.price*item.quantity | filtermoney}}/tdtdbutton typebutton classbtn btn-danger clickremove(index)移除/button/td/trtrtd总购买价/tdtd{{animatenum | filtermoney}}/tdtd总购买数量/tdtd/tdtd colspan2button typebutton classbtn btn-danger clickempty()清空购物车/button/td/tr/tbody/tablep v-ifmessage.length0您的购物车为空/p/div/bodyscriptvar vm new Vue({el: #all,data: {totalPrice: 0,animatenum: 0,message: [{id: 1003,name: iphone5s,quantity: 1,price: 3000}, {id: 1009,name: iphone11,quantity: 3,price: 8000}, {id: 1024,name: macbook,quantity: 1,price: 15000}, {id: 2019,name: ipad pro,quantity: 2,price: 7000}]},watch: {Computer: function(newValue, oldValue) {this.tween(newValue, oldValue);}},computed: {Computer: 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(49000, 0);},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() {vm.animatenum this.animatenum.toFixed();})twen.start();animate();}}});/script
/html
扫一扫关注我的公众号获取更多资讯呦
