reduce 的购物车遍历累加

money() {
                const money = this.cart.reduce((s, shop) => {
                    if (shop.check == true) {
                        s += shop.price * shop.count
                    }
                    return s
                }, 0)
                $('.jin2').html(money)
            }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"> <title>vue购物商品累加结算代码  </title> <!--css类引用--> <link rel="stylesheet" href="js/layui/css/layui.css?3.1.64" /> <link rel="stylesheet" href="js/eleme-ui/index.css?3.1.64" /> <link rel="stylesheet" href="css/ShoppingCart.css?3.1.64" /> </head> <body> <!--主要内容--> <div class="row " id="myVue" v-cloak> <div class="col-lg-10 col-lg-offset-1" > <div class="layui-form"> <table class="ShopCartTable layui-table"> <thead> <tr> <th class="selectLeft"> <template> <el-checkbox  @change="checkedAllBtn(checkedAll)" v-model="checkedAll">全选</el-checkbox> </template> <span class="selectLeftGoods">商品或服务名称</span> </th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(tabledatas,index) in shopTableDatas"> <td  class="selectLeft"> <template> <el-checkbox @change="checkedRadioBtn(tabledatas)" v-model="tabledatas.checked"></el-checkbox> </template> <span class="goodName"> <img /> </span> <span class="goodName goodsName"> <h2 class="goodname" v-text="tabledatas.name"></h2> <p class="goodGary"> <span>供应商:</span> <span v-text="tabledatas.supplier"></span> </p> <p class="goodGary"> <span>发货地:</span> <span v-text="tabledatas.ConPlace"></span> </p> </span> </td> <td class="danPrice">{{tabledatas.price | moneyFiler}}</td> <td> <i @click="goodNum(tabledatas,-1)" class="fa  deleteBtn" aria-hidden="true">-</i> <input v-model="tabledatas.num" type="text" class="form-control numInput" aria-label="..."> <i @click="goodNum(tabledatas,1)" class="fa  addBtn" aria-hidden="true"> </i> </td> <td> <p class="totalPrice">{{tabledatas.price*tabledatas.num | moneyFiler}}</p> </td> <td class="gongneng"> <p class="deletegoods" @click="alertRadio(index)">删除</p> <p @click="alertmovesSavegoods(index)">移到我的收藏</p> <template v-if="tabledatas.saveandremove"> <p @click="tabledatas.saveandremove = false">加入收藏</p> </template> <template v-else> <p :class="{'saveCheck':!tabledatas.saveandremove}" @click="tabledatas.saveandremove = true">取消收藏</p> </template> </td> </tr> </tbody> </table> <div class="row tablefooter"> <template> <el-checkbox @change="checkedAllBtn(checkedAll)" v-model="checkedAll">全选</el-checkbox> </template> <span class="removeMuch" @click="alertMuch">删除选中的商品或服务</span> <span class="removeSaves" @click="alertMuchgoods">移到我的收藏</span> <span class="servicenum">已选择<span class="goodsNum">{{goodsNum}}</span>件商品<span class="goodsNum">{{serviceNum}}</span>项服务</span> <span class="totalclassPoin">总价:<span class="totalMoneyClass">{{totalMoney | moneyFiler}}</span></span> <span @click="saveData" class="SettlementBtn">去结算</span> </div> </div> </div> </div> <!--js类引用--> [removed][removed] [removed][removed] [removed][removed] <div 0; font:normal 14px/24px 'MicroSoft YaHei';">  </div> </body> </html> 这是一个j购物商品累加结算效果,需要的朋友可以直接下载使用,更多特效代码尽在PHP中文网。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值