一个js购物车累加的一个小练习

功能比较简单 就一个累加 css也比较简单 以后会发一个完整的购物车

<div class="goods-type">
    <div class="type-nav">
        <ul>
            <li>休闲零食</li>
            <li>饮料酒水</li>
            <li>方便速食</li>
            <li>冷饮</li>
            <li>速冻食品</li>
        </ul>
    </div>
    <div class="goods">
        <ul class="goods-nav">
            <li>全部</li>
            <li>饼干</li>
            <li>膨化食品</li>
            <li>坚果</li>
        </ul>
        <ul class="goods-con">
            <li>
                <img src="img/images.png">
                <p>达利园法式小面包</p>
                <p>200g(10枚)</p>
                <p class="price-num"><span class="price" id="jia">¥6</span>
  • 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、付费专栏及课程。

余额充值