本文實例為大家分享了vue購物車插件的具體代碼，供大家參考，具體內容如下
先上效果圖
下面相關代碼：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Hello MUI</title><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="stylesheet" href="../../css/mui.min.css"><link rel="stylesheet" href="../../css/app.css"><style>.mui-content>.mui-table-view:first-child{margin-top: 0.133333rem;}.mui-bar-nav~.mui-content{padding-top: 1.173333rem;}.mui-content{padding-bottom: 1.173333rem;}input[type=checkbox] { width: 0.426666rem; height: 0.426666rem; border: 0; outline: 0!important; background-color: transparent; -webkit-appearance: none;}input[type=checkbox]:before { content: '/e411';}input[type=checkbox]:checked:before { content: '/e441';}input[type=checkbox]:before { font-family: Muiicons; font-size: 0.426666rem; font-weight: 400; line-height: 1; text-decoration: none; color: #81d8d0; border-radius: 0; background: 0 0; -webkit-font-smoothing: antialiased;}input[type=checkbox]:checked:before { color: #81d8d0;}.allinput[type=checkbox] { width: 0.426666rem; height: 0.426666rem; border: 0; outline: 0!important; background-color: transparent; -webkit-appearance: none;}.allinput[type=checkbox]:before { content: '/e411';}.allinput[type=checkbox]:checked:before { content: '/e441';}.allinput[type=checkbox]:before { font-family: Muiicons; font-size: 0.426666rem; font-weight: 400; line-height: 1; text-decoration: none; color: #fff; border-radius: 0; background: 0 0; -webkit-font-smoothing: antialiased;}.allinput[type=checkbox]:checked:before { color: #fff;}.popover_detail_numbtn .mui-numbox{float: right;border-radius: 0;padding: 0 0.56rem;height: 0.586666rem;width:2rem;}.mui-numbox [class*=btn-numbox], .mui-numbox [class*=numbox-btn] { font-size: 0.4rem; line-height: 0.56rem; width: 0.56rem; height: 0.56rem; color: #707070; background-color: #fff;}.shop_input_num[type=number]{font-size: 0.266666rem;line-height: 0.56rem;top: 0;}</style></head><body id="app" v-cloak><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-pull-left mui_return_back"></a><h1 class="mui-title">購物車</h1></header><div class="mui-content"><div class="mui_shopcar_list_box" v-for="data in items"><div class="mui_order_item_title"><div class="mui_adress_radio"><input type="checkbox" v-model="data.shopselected" v-on:click="checkShop($index)"></div> <a href="javascript:;" class="look_shop" v-on:click="LookShop(data.id)"> {{data.shopname}} <img class="order_link" src="../../images/icon/order_link.png"/> </a> </div><ul class="mui-table-view mui-table-view-chevron mui_shopcar_list"><li class="mui_shopcar_item" v-for="item in data.listgoods"><div class="mui_adress_radio"><input type="checkbox" v-model="item.selected" v-on:click="checkGoods($parent.$index,$index)"></div><div class="mui_shopcar_img" v-on:click="LookGoods(item.id)"><img src="../../images/423.jpg"/></div><div class="mui_shopcar_media"><div class="mui_shopcar_title"><p class="mui_shopcar_name">{{ item.name }}</p><span class="mui_shopcar_del" v-on:click="remove($parent.$index,$index)"><a><img src="../../images/icon/19.png" alt="" /></a></span></div><p class="mui_shopcar_unit">單位：升</p><div class="mui_shopcar_pro"><p class="mui_shopcar_price">{{item.price|currency '￥' 2}}</p><div class="popover_detail_numbtn"><div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'><button class="mui-btn mui-btn-numbox-minus" type="button" v-on:click.native="reduce($parent.$index,$index)">-</button><input class="mui-input-numbox shop_input_num" type="number" disabled value="{{item.count}}"/><button class="mui-btn mui-btn-numbox-plus" type="button" v-on:click.native="add($parent.$index,$index)">+</button></div></div></div></div></li><!--<li class="mui_shopcar_item"><div class="mui_adress_radio"><input name="address" type="checkbox"></div><div class="mui_shopcar_img"><img src="../../images/423.jpg"/></div><div class="mui_shopcar_media"><div class="mui_shopcar_title"><p class="mui_shopcar_name">內蒙古原產牛奶</p><span class="mui_shopcar_del"><img src="../../images/icon/19.png" alt="" /></span></div><p class="mui_shopcar_unit">單位：升</p><div class="mui_shopcar_pro"><p class="mui_shopcar_price">￥ 50.00</p><div class="popover_detail_numbtn"><div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'><button class="mui-btn mui-btn-numbox-minus" type="button">-</button><input id="test" class="mui-input-numbox" type="number" value="5" /><button class="mui-btn mui-btn-numbox-plus" type="button">+</button></div></div></div></div></li>--></ul></div></div><div class="mui_shopcar_bar"><div class="mui_adress_radio"><input type="checkbox" class="allinput" v-model="selectAll">全選</div><div class="mui_shopcar_sumbtn"><p class="mui_shopcar_sum">合計：{{ total|currency '￥' 2}}</p><button id="order_true" type="button" v-on:click.native="Submit()">結算</button></div></div><script type="text/javascript" src="../../js/app.js" ></script><script src="../../js/mui.min.js"></script><script src="../../js/vue.min.js"></script><script src="../../js/jquery-1.8.3.min.js" ></script><script>mui.init();//初始化mui.plusReady(function(){})var vm = new Vue({ el: "#app", data: { OrderTotal:0,//用來保存商品總價 items: [//加入購物車商品 { id:1, shopname:'內蒙古原產牛奶', shopselected:false, listgoods:[ { id:101, name: '奶片', price:1.3, count:2, selected:false }, { id:102, name: '小辣椒', price:100, count:1, selected:false }, { id:103, name: '小辣椒22222', price:100, count:1, selected:false } ] }, { id:2, shopname:'云端電子', shopselected:false, listgoods:[ { id:201, name: '三星', price:4000, count:2, selected:false }, { id:202, name: '華為1', price:100, count:1, selected:false }, { id:203, name: '華為2', price:100, count:1, selected:false }, { id:204, name: '華為3', price:100, count:1, selected:false } ] }, { id:3, shopname:'小米官方商店', shopselected:false, listgoods:[ { id:301, name: '小米4', price:1.3, count:2, selected:false } ] } ] }, //computed相當于屬性的一個實時計算，如果實時計算里關聯了對象，那么當對象的某個值改變的時候，同事會出發實時計算。 computed: { selectAll:{ //動態判斷全選按鈕是否選中（根據 選中的商店數量==items數組長度） get:function(){ return this.items.filter(function(item){ return item.shopselected == true; }).length == this.items.length; }, //設置全選 set:function(val){ this.items.forEach(function(item){//遍歷所有商店 item.shopselected = val;//所有商店選中 item.listgoods.forEach(function(list){//遍歷所有商品 list.selected = val;//所有商品選中 }) }); } }, num:function(){ var num = 0; this.items.forEach(function(item){//遍歷商家數組 item.listgoods.filter(function(a){//遍歷商品數組 return a.selected//選擇選中的商品 }).map(function(a){ return a.count//計算商品數量*商品單價 }).forEach(function(a){ num += a; }); }) return num;//返回總價 }, //計算總價 total:function(){ var total = 0; this.items.forEach(function(item){//遍歷商家數組 item.listgoods.filter(function(a){//遍歷商品數組 return a.selected//選擇選中的商品 }).map(function(a){ return a.count*a.price//計算商品數量*商品單價 }).forEach(function(a){ total += a; }); }) this.OrderTotal = total;//更新商品總價 return total;//返回總價 } }, methods:{ //點擊商店選中所有商品 checkShop:function(pID){ var self = this.items[pID]; if(self.shopselected != true){ self.listgoods.forEach(function(list){ list.selected = true; }) }else{ self.listgoods.forEach(function(list){ list.selected = false; }) } }, //選擇某商品 判斷商店是否全選 checkGoods:function(pID,id){ var self = this.items[pID];//點擊單選框的父節點 if(self.listgoods[id].selected){//判斷當選框是否備選中 self.listgoods.filter(function(item){ return item.selected == true; }).length-1 == self.listgoods.length ? self.shopselected = true : self.shopselected = false; }else{ self.listgoods.filter(function(item){ return item.selected == true; }).length+1 == self.listgoods.length ? self.shopselected = true : self.shopselected = false; } }, //增加商品數量 最多購買100件 add:function (parentID,ID) {//parentID是商家id,ID是商品id var self = this.items[parentID].listgoods[ID]; if(self.count >100){ return false; } self.count++; }, //減少商品數量 最少買一件 reduce:function(parentID,ID){//parentID是商家id,ID是商品id var self = this.items[parentID].listgoods[ID]; if(self.count <= 1){ return false } self.count--; }, //移除商品函數 remove:function(parentID,ID){//parentID是商家id,ID是商品id var self = this.items[parentID]; self.listgoods.length == 1 ? this.items.splice(parentID, 1) : self.listgoods.splice(ID, 1);//如果刪除最后一個商品，則商家一并刪除 }, //結算函數 Submit:function(){ //獲取選中的商家及相應的商品 var TotalPrice = this.OrderTotal;//存放要支付的總價 var OrderArry = [];//存放選中的商品數組 this.items.forEach(function(item){//遍歷商家數組if(item.shopselected){//如果商家備選中則其下商品均被選中，直接添加數組return OrderArry.push(item)}else{//如果商家沒有選中，繼續遍歷旗下商品是否備選中var arry = {//設置臨時數組，來保存沒有選中商店的數據'id' : item.id,//商店id 'shopname' : item.shopname,//商店名字 'shopselected' : item.shopselected,//商店是否備選中 'listgoods' : []//商店旗下的商品數組};item.listgoods.filter(function(list){//遍歷商店旗下的商品數組 return list.selected//過濾所有選中的商品 }).map(function(a){ return arry.listgoods.push(a)//將選中的商品添加到數組中 }); if(arry.listgoods.length > 0){//如果有商品選中在添加到數組 OrderArry.push(arry) }} }); console.log(OrderArry)//打印選中的商品數組 console.log(TotalPrice)//打印總價 //結算跳轉頁面 //打開確認訂單 mui.openWindow({ url: 'order_true.html', id:'order_true.html', extras:{//自定義擴展參數，可以用來處理頁面間傳值 'BuyMethod' : 'ShoppingCartSettlement',//結算方式 'ItemList' : OrderArry,//選擇的商品數組 'TotalPrice' : TotalPrice//要支付的總價 }, waiting:{ autoShow:true,//自動顯示等待框，默認為true title:'正在加載...'//等待對話框上顯示的提示內容 } }); }, //查看商家 LookShop:function(id){ mui.openWindow({ url: '../SellerHome/seller_index.html', id:'../SellerHome/seller_index.html', extras:{ //自定義擴展參數，可以用來處理頁面間傳值 }, waiting:{ autoShow:true,//自動顯示等待框，默認為true //title:'正在加載...'//等待對話框上顯示的提示內容 } }); }, //查看商品 LookGoods:function(id){ mui.openWindow({ url: '../Selected/selected_list_details.html', id:'../Selected/selected_list_details.html', extras:{ //自定義擴展參數，可以用來處理頁面間傳值 }, waiting:{ autoShow:false,//自動顯示等待框，默認為true //title:'正在加載...'//等待對話框上顯示的提示內容 } }); }, } });</script></body></html>關于vue.js的學習教程，請大家點擊專題vue.js組件學習教程、Vue.js前端組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
