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;
}