蝙蝠岛资源网 Design By www.hbtsch.com
用vue做的购物车结算的功能,供大家参考,具体内容如下
代码:
<!-- 占位 --> <template> <div> <div class="product_table"> <div class="product_info">商品信息</div> <div class="product_info">商品金额</div> <div class="product_info">商品数量</div> <div class="product_info">总金额</div> <div class="product_info">编辑</div> </div> <div class="product_table" v-for="(item,index) in getProductList" :key="index"> <div style="width:20px;height:20px;border-radius:10px;border:1px solid black;" @click="checkSingle(item)" :class="{checked:item.makeChoose}"></div> <div class="product_info">{{item.productName}}</div> <div class="product_info">{{item.productPrice}}</div> <span @click="changeNumber(item,1)">+</span> <input type="text" v-model="item.prductQty" style="width: 30px;"> <span @click="changeNumber(item,-1)">-</span> <div class="product_info">{{item.productPrice*item.prductQty}}</div> <div class="product_info" @click="deleteProduct(index)">删除</div> </div> <div style="width:20px;height:20px;border-radius:10px;border:1px solid black;margin-top:10px" @click="checkAll()" :class="{checked:checkAllItem}"></div> <div>总价格:{{totalPrice}}</div> </div> </template> <script> import Vue from 'vue' export default { name: 'side-bar-placeholder', data () { return { getProductList:[ { productName:'西瓜', productPrice:100, prductQty:3 }, { productName:'南瓜', productPrice:50, prductQty:2 }, { productName:'苹果', productPrice:300, prductQty:3 }, ], totalPrice:0, //总金额 checkAllItem:false, //全部选中 checkedList:[] //选中的数 } }, methods:{ //删除某一项 deleteProduct:function (index) { this.getProductList.splice(index,1) this.calcTotalPrice() //这里要注意,当某一项删除时,如果你选中了,这里也是要做计算总价格的 }, //修改数量 changeNumber:function (number,add) { if(add<0){ number.prductQty--; if(number.prductQty<'1'){ //因为数量最低是1 number.prductQty=1 } }else{ number.prductQty++; } this.calcTotalPrice() }, //选中单个的 checkSingle:function (item){ if(typeof item.makeChoose=='undefined'){ //这里要注意,因为checked字段根本不在this.getProductList里面,所以你要自己赋值进去 Vue.set(item, 'makeChoose',true) //这里应该设为true }else{ item.makeChoose=!item.makeChoose } this.calcTotalPrice() }, //选中所有的 checkAll:function (){ this.checkAllItem=!this.checkAllItem var _this=this if(this.checkAllItem){ this.getProductList.forEach(element => { if(typeof element.makeChoose=='undefined'){ Vue.set(element, 'makeChoose',_this.checkAllItem) //让每一小项跟随checkall来变化 }else{ element.makeChoose=_this.checkAllItem } }); }else{ this.getProductList.forEach(element => { if(typeof element.makeChoose=='undefined'){ Vue.set(element, 'makeChoose',_this.checkAllItem) }else{ element.makeChoose=_this.checkAllItem } }); } this.calcTotalPrice() }, //计算总金额 calcTotalPrice:function () { var _this=this this.totalPrice=0 this.getProductList.forEach((element,index) => { if(element.makeChoose){ _this.totalPrice+=element.productPrice*element.prductQty //这里是一个累加的过程,所以要用+= } }); }, //让页面一进来就处于选中的状态 makeAllChecked:function () { this.getProductList.forEach((item)=>{ if(typeof item.makeChoose=='undefined'){ Vue.set(item, 'makeChoose',true) } }) } } , watch:{ //如果全部选中,那么全部选中的按钮应该变绿,如果一项不是,应该变空 getProductList:{ handler:function (item) { this.checkedList=this.getProductList.filter((element)=>{ return element.makeChoose==true; }) //选中数<总数据 if(this.checkedList.length<this.getProductList.length){ this.checkAllItem=false }else{ this.checkAllItem=true } }, deep:true //这个deep:true一定要写,不然肯定不会时时变化的 } } , created:function (){ this.makeAllChecked() } } </script> <style lang="less" scoped> .product_table{ display: flex; width: 100%; } .product_info{ flex:1; } .checked{ background-color:green; } </style>
这个代码实现了什么?
1.在点击加减时每个产品的总价变化,所有产品的总价变化
2.选中时才会结算
3.如果全部选中了每个子项,全部选中按钮会变绿,如果有一项不选中,那么会变白
4.一般的购物车,我希望他一进来就是checked的状态,提高购买性
5.当我删除某一项时,如果这一项是已经checked了的,也要让他在计算总价时重新计算.
ps:最后一行的按钮是全部选中哦,或者是全部取消,忘记写了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
vue,购物车
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无vue实现购物车结算功能的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]