第五节 单件商品金额计算和单选全选功能
1.vue精髓在于操作data模型来改变dom,渲染页面,而不是直接去改变dom
2.加减改变总金额功能:
html: <div class="cart-tab-3"> <div class="item-quantity"> <div class="select-self select-self-open"> <div class="quentity"> <a href="javascript:;" v-on:click="changeMoney(item,-1)">-</a> <input type="text" v-model="item.productQuentity"> <!--双向数据绑定功能,实现总金额实时变化功能--> <a href="javascript:;" @click="changeMoney(item,1)">+</a> </div> </div> <div class="item-stock">有货</div> </div> </div> <div class="cart-tab-4"> <!-- 总金额 --> <div class="item-price-total">{{item.productPrice*item.productQuentity | formatMoney}}</div> </div> js: methods:{ cartView: function () { //.... }, changeMoney:function (product,way) { if(way>0){ product.productQuentity++; }else{ product.productQuentity--; if(product.productQuentity<0){ product.productQuentity=1; } } } }
效果:
☞
总金额57.00是实时计算的过程,一旦其中有一个变量变化,其他的也会实时进行变化,这也是vue十分方便的地方。
3.单选商品功能
html:
<a href="javascipt:;" class="item-check-btn" v-bind:class="{'check':item.checked}" @click="selctectedProduct(item)"> <!--class是object--> js: selctectedProduct:function (item) { if(typeof item.checked =='undefined'){ /*局部注册和全局注册item,vue无法监听undefined字段*/ //Vue.set(item,"checked",true);//全局注册 this.$set(item,"checked",true);//局部注册 }else{ item.checked = !item.checked; } },
效果:
4.全选和全不选
html:
<div class="cart-foot-l"> <div class="item-all-check"> <a href="javascipt:;"> <span class="item-check-btn" :class="{'check':checkAllFlag}" @click="checkAll(true)"> <!--@click里可以写一元和三元表达式,但是不允许写复杂的业务逻辑如@click="checkAllFlag=true"--> <svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg> </span> <span>全选</span> </a> </div> <div class="item-all-del"> <a href="javascipt:;" class="item-del-btn" @click="checkAll(false)"> 取消全选 </a> </div> </div> js: data:{ totalMoney:0, productList:[], checkAllFlag:false /*初始值*/ }, checkAll:function (flag) { this.checkAllFlag=flag; var _this=this; this.productList.forEach(function(item,index){ if(typeof item.checked =='undefined'){ _this.$set(item,"checked",_this.checkAllFlag);//局部注册 }else{ item.checked = _this.checkAllFlag; } }); }
效果:
![](https://images2015.cnblogs.com/blog/1060032/201702/1060032-20170226134828320-650989646.png)
v-model具有数据双向绑定功能,单商品总金额是依赖productproductQuentity,会实时发生变化,而全部商品总金额,是个变量通过每次操作触发事件进行改变
5.删除单商品订单功能
html: <a href="javascript:;" class="item-edit-btn" @click="delConfirm(item)"> <div class="md-modal modal-msg md-modal-transition" id="showModal" v-bind:class="{'md-show':delFlag}"> <div class="md-modal-inner"> <div class="md-top"> <button class="md-close" @click="delFlag=false">关闭</button> </div> <div class="md-content"> <div class="confirm-tips"> <p id="cusLanInfo">你确认删除此订单信息吗?</p> </div> <div class="btn-wrap col-2"> <button class="btn btn--m" id="btnModalConfirm" @click="delProduct()">Yes</button> <button class="btn btn--m btn--red" id="btnModalCancel" @click="delFlag=false">No</button> </div> </div> </div> </div> <div class="md-overlay" id="showOverLay" v-if="delFlag"></div> js: delConfirm:function (item) { this.delFlag=true; this.carProduct=item; }, delProduct:function () { var index=this.productList.indexOf(this.carProduct); this.productList.splice(index,1); /*这里应该用http调用后台接口进行删除*/ /*然后v-for会实时重新渲染*/ this.delFlag=false; }