vue2.x實現購物車
阿新 • • 發佈：2018-12-24
看到網上vue實現購物車一個demo，但是發現問題挺多的，一些瀏覽器相容性也不好，還有一些寫法過於繁瑣，所以改寫了該demo重新發布，廢話不多說，直接貼程式碼.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/vue.min.js"></script> <title></title> </head> <body> <div class="container" id="app"> <h2 class="page-header">購物車</h2> <table class="table"> <tr> <th><label><input type="checkbox" @click="check_all" :checked="check_goods.length == cart_list.length"/>全選</label></th> <th>商品名稱</th> <th>商品價格</th> <th>數量</th> <th>操作</th> </tr> <tr v-for="(cart,index) in cart_list" :key="index"> <td><input type="checkbox" :value="cart" v-model="check_goods" /></td> <td>{{cart.goods_name}}</td> <td>{{cart.goods_price}}</td> <td class="col-xs-3"> <span :disabled="cart.num <= 1" class="btn btn-default" @click="cart.num -= 1">-</span> <!--<input class="btn-group" type="number" v-model="cart.num" readonly="readonly" />--> {{cart.num}} <span class="btn btn-default" @click="cart.num += 1">+</span> </td> <td> <button class="btn btn-danger" @click="delete_num">刪除</button> </td> </tr> <tr v-show="cart_list.length==0"> <td colspan="6" class="text-center text-muted"> <p>暫無資料....</p> </td> </tr> </table> <div> 總計：共 {{cart_list.length }}件商品，已選擇 {{total_num}} 件 <div class="pull-right"> 合計：{{total_price}}元 <a href="" class="btn btn-success" @click="payment()" :disabled="check_goods.length <= 0">去結算</a> </div> </div> </div> <script> var vm = new Vue({ el: "#app", data: { cart_list: [{ goods_name: '小米6', goods_price: '1600', num: 2, }, { goods_name: '紅米3', goods_price: '700', num: 1, }, { goods_name: '小米8', goods_price: '2800', num: 1, }], check_goods: [] //已選擇的商品 }, methods: { // 商品類減減 reduce: function(cart) { if(cart.num <= 0) { cart.num = 0 } else { cart.num-- } }, // 商品累加 add_num: function(cart) { cart.num++ }, // 刪除商品 delete_num: function(cart) { this.check_goods.splice(this.check_goods.indexOf(cart), 1) this.cart_list.splice(this.cart_list.indexOf(cart), 1) }, //全選 check_all: function() { if(vm.check_goods.length > 0) { vm.check_goods = [] } else { /*this.cart_list.forEach((item,index) => { this.check_goods.push(item) })*/ vm.cart_list.forEach(function(item,index){ vm.check_goods.push(item) }) } }, payment: function(){ alert("付款") } }, computed: { // 總價 total_price: function() { //let price = 0 var price = 0; /*this.check_goods.forEach(item => { // 總價 = 價格 * 數量 price += Number(item.goods_price) * Number(item.num) })*/ this.check_goods.forEach(function(item){ price += Number(item.goods_price) * Number(item.num) }) return price }, // 數量 total_num: function() { var t_num = 0; this.check_goods.forEach(function(item){ t_num += Number(item.num); }) return t_num } } }) </script> </body> </html>