Vue 购物车案例

用Vue实现购物车。

程序详解：
页面要显示商品的基本信息（编号，名称，单价，购买数量，总价等）
1.增加和减少商品数量
2.商品金额会随数量变化
3.会自动计算总金额
4.对某一类商品进行移除操作
5.还有清空购物车

效果演示

原始样式
在这里插入图片描述
增加iphone5s和macbook的数量都为5则总价随之变化

移除iphone5s这一类商品

点击清空购物车按钮

看了上面的演示有没有心动的感觉呢？？？

代码演示

导入三个文件

<head><meta charset="utf-8"><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="external nofollow" /><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></head>

body内容

<body><div id="all" 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>{{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></body>

Vue代码

<script>var 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>
<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" /><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></head><body><div id="all" 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>{{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></body><script>var 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>