Vue 购物车案例
用Vue實現購物車。
程序詳解：
頁面要顯示商品的基本信息（編號，名稱，單價，購買數量，總價等）
1.增加和減少商品數量
2.商品金額會隨數量變化
3.會自動計算總金額
4.對某一類商品進行移除操作
5.還有清空購物車
效果演示
原始樣式
增加iphone5s和macbook的數量都為5則總價隨之變化
移除iphone5s這一類商品
點擊清空購物車按鈕
看了上面的演示有沒有心動的感覺呢？？？
代碼演示
如果看上面分步代碼有點疑惑的話看下面總體代碼
總體代碼展示
<!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>掃一掃關注我的公眾號獲取更多資訊呦！！！
總結
- 上一篇： 中职计算机组成原理期末,计组期末复习
- 下一篇： vue 浏览器调试 样式如何定位样式_浏