VUE2.0实现购物车和地址选配功能学习第五节

第五节 单件商品金额计算和单选全选功能

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&#45;&#45;m" id="btnModalConfirm" @click="delProduct()">Yes</button>
                 <button class="btn btn&#45;&#45;m btn&#45;&#45;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;
}