Vue.js搭建移动端购物车界面

  <!-- table --> 
  <div class="item-list-wrap"&gt; 
   <divclassdivclass="cart-item"&gt; 
    <divclassdivclass="cart-item-head"&gt; 
     <ul> 
      <li>商品信息</li> 
      <li>商品金额</li> 
      <li>商品数量</li> 
      <li>总金额</li> 
      <li>编辑</li> 
     </ul> 
    </div> 
    <ulclassulclass="cart-item-list"&gt; 
     <!--productList在Vue组件中的data定义，包含全部数据，使用v-for进行遍历显示--> 
     <li v-for="item inproductList"&gt; 
      <divclassdivclass="cart-tab-1"&gt; 
       <divclassdivclass="cart-item-check"&gt; 
        <!--Vue2.0中想为HTML标签绑定属性，必须使用v-bind:，绑定内容为对象，这里为a标签绑定check属性，属性值为item中的checked值--> 
        <!--@click是v-on:click的缩写，为这个按钮绑定了点击事件，对应Vue组件methods中定义的方法selectProduct--> 
        <ahrefahref="javascript:void 0" class="item-check-btn"v-bind:class="{'check': item.checked}"@click="selectedProduct(item)"&gt; 
         <svgclasssvgclass="icon icon-ok"&gt;<usexlink:hrefusexlink:href="#icon-ok"&gt;</use></svg> 
        </a> 
       </div> 
       <divclassdivclass="cart-item-pic"&gt; 
        <imgv-bind:srcimgv-bind:src="item.productImage" alt="烟"&gt; 
       </div> 
       <divclassdivclass="cart-item-title"&gt; 
        <divclassdivclass="item-name"&gt;{{ item.productName }}</div> 
       </div> 
       <divclassdivclass="item-include"&gt; 
        <dl> 
         <dt>赠送:</dt> 
         <ddv-forddv-for="part in item.parts"v-text="part.partsName"&gt;</dd> 
        </dl> 
       </div> 
      </div> 
      <divclassdivclass="cart-tab-2"&gt; 
       <!--使用过滤器，|后面加Vue组件filter中定义的过滤器名称--> 
       <divclassdivclass="item-price"&gt;{{ item.productPrice |formatMoney}}</div> 
      </div> 
      <divclassdivclass="cart-tab-3"&gt; 
       <divclassdivclass="item-quantity"&gt; 
        <divclassdivclass="select-self select-self-open"&gt; 
         <divclassdivclass="quantity"&gt; 
          <!--绑定changeMoney()方法，调整商品数量--> 
          <ahrefahref="javascript:;"@click="changeMoney(item,-1)"&gt;-</a> 
          <inputtypeinputtype="text" :value="item.productQuantity" disabled> 
          <ahrefahref="javascript:;"@click="changeMoney(item,1)"&gt;+</a> 
         </div> 
        </div> 
        <divclassdivclass="item-stock"&gt;有货</div> 
       </div> 
      </div> 
      <divclassdivclass="cart-tab-4"&gt; 
       <divclassdivclass="item-price-total"&gt;{{ item.productPrice*item.productQuantity| money('元')}}</div> 
      </div> 
      <div class="cart-tab-5"&gt; 
       <divclassdivclass="cart-item-operation"&gt; 
        <!--delConfirm方法控制删除时的弹框显示状态--> 
        <ahrefahref="javascript:void 0" class="item-edit-btn"@click="delConfirm(item)"&gt; 
         <svg class="iconicon-del"&gt;<use xlink:href="#icon-del"&gt;</use></svg> 
        </a> 
       </div> 
      </div> 
     </li> 
    </ul> 
   </div> 
  </div> 

  <!-- footer --> 
  <div class="cart-foot-wrap"&gt; 
   <divclassdivclass="cart-foot-l"&gt; 
    <divclassdivclass="item-all-check"&gt; 
     <ahrefahref="javascript:void 0"&gt; 
      <spanclassspanclass="item-check-btn" :class="{'check':checkAllFlag}"@click="checkAll(true)"&gt; 
       <svg class="iconicon-ok"&gt;<usexlink:hrefusexlink:href="#icon-ok"&gt;</use></svg> 
      </span> 
      <span v-show="!checkAllFlag"&gt;全选</span> 
     </a> 
    </div> 
    <divclassdivclass="item-all-del"&gt; 
     <ahrefahref="javascript:void 0" class="item-del-btn"@click="checkAll(false)"&gt; 
      <spanv-showspanv-show="checkAllFlag"&gt;取消全选</span> 
     </a> 
    </div> 
   </div> 
   <divclassdivclass="cart-foot-r"&gt; 
    <divclassdivclass="item-total"&gt; 
     <!--totalMoney是商品总金额，在Vue组件中通过方法被修改--> 
     Item total: <span class="total-price"&gt;{{totalMoney| money('元')}}</span> 
    </div> 
    <divclassdivclass="next-btn-wrap"&gt; 
     <ahrefahref="address.html" class="btn btn--red" style="width:200px"&gt;结账</a> 
    </div> 
   </div> 
  </div> 
 </div> 
</div> 

<!--绑定一个md-show类，通过delFlag变量控制这个类，这个类可以让弹框显示或隐藏--> 
<div class="md-modal modal-msg md-modal-transition"id="showModal" v-bind:class="{'md-show':delFlag}"&gt; 
 <div class="md-modal-inner"&gt; 
  <div class="md-top"&gt; 
   <!--关闭按钮，通过改变delFlag值控制弹框状态--> 
   <buttonclassbuttonclass="md-close" @click="delFlag = false"&gt;关闭</button> 
  </div> 
  <div class="md-content"&gt; 
   <divclassdivclass="confirm-tips"&gt; 
    <pidpid="cusLanInfo"&gt;你确认删除此订单信息吗?</p> 
   </div> 
   <div class="btn-wrapcol-2"&gt; 
    <!--选择yes则调用delProduct删除元素--> 
    <button class="btnbtn--m" id="btnModalConfirm"@click="delProduct"&gt;Yes</button> 
    <button class="btnbtn--m btn--red" id="btnModalCancel"@click="delFlag=false"&gt;No</button> 
   </div> 
  </div> 
 </div> 
</div> 
<!--遮罩层，整个都是通过delFlag进行控制的，v-if根据表达式的真假条件渲染元素--> 
<div class="md-overlay"v-if="delFlag"&gt;</div>