第五节 单件商品金额计算和单选全选功能
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;
}
}); }
效果：
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;
}