这篇文章主要讲解了vue实现淘宝购物车功能的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
成都创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站制作、网站设计、外贸网站建设、汝阳网络推广、微信小程序、汝阳网络营销、汝阳企业策划、汝阳品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们大的嘉奖;成都创新互联为所有大学生创业者提供汝阳建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.com淘宝购物车功能,效果如下图
非常简单的逻辑,没有做代码的封装,代码如下
<div class="list-container"> <div class="top-ops"> <div> <img src="../../../static/images/HomeRecommendShopInfoAdress@2x.png" alt=""> <span>浙江省杭州市...</span> </div> <div class="ops"> <span v-if="cartStatus === 'account'" @click="cartStatus = 'edit'">编辑商品</span> <span v-if="cartStatus === 'edit'" @click="cartStatus = 'account'">完成</span> </div> </div> <div class="paddingB200"> <div class="shop-list" v-for="(item,index) in cartShops" :key="index"> <div class="shop-name"> <label> <input type="checkbox" name="shopRadio" :value="item.productShopId" @click="shopCheck($event,cartShops)" class="disN"> <b></b> </label> <div> <div> <img src="../../../static/images/mall@2x.png" alt=""> <span class="name">{{item.shopName}}</span> </div> <span> <img src="../../../static/images/jtxq@2x.png" alt=""> </span> </div> </div> <div class="goods-list" v-for="(goods,goodsIndex) in item.detailLists" :key="goodsIndex"> <label> <input type="checkbox" name="goodRadio" :price="goods.price" :num="goods.number" :dataId="item.productShopId" :value="goods.cartDetailId" @click="goodsCkeck($event,item.detailLists,cartShops,item.productShopId)" class="disN"> <b></b> </label> <div class="middle"> <img :src="goods.reportImage" alt=""> <div> <p class="name">{{goods.name}}</p> <p class="spec">{{goods.specifications}}</p> <p class="tab"> <img src="../../../static/images/lsspbq@2x.png" alt=""> </p> </div> </div> <div class="right"> <p class="price">¥{{goods.price}}</p> <p class="num">X{{goods.number}}</p> <p class="caculate"> <span class="mark" @click="numDecrease(goods.number)"></span> <span class="beeforCacul">{{goods.number}}</span> <span class="cacul" :num="goods.cartDetailId">{{goods.number}}</span> <span class="mark" @click="numAdd(goods.number)"></span> </p> </div> </div> </div> <div class="edit" v-if="cartStatus === 'edit'"> <label> <input type="checkbox" name="allRadio" class="disN" @click="allCheck($event)"> <b></b> <span>全选</span> </label> <span class="delet">删除(3)</span> </div> <div class="gotopay" v-if="cartStatus === 'account'"> <label> <input type="checkbox" name="allRadio" class="disN" @click="allCheck($event)"> <b></b> <span class="marginR40">全选</span> <span>合计:</span> <span class="sum">¥{{sumPrice.toFixed(2)}}</span> </label> <span class="delet" @click="cauSum">去结算({{totalNumber}})</span> </div> </div> </div>
网站题目:vue实现淘宝购物车功能的方法-创新互联
新闻来源:https://www.cdcxhl.com/article28/degscp.html
成都网站建设公司_创新互联,为您提供建站公司、标签优化、App开发、企业建站、品牌网站建设、网站营销
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联