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

时间：2020-11-27 来源：智榕旅游

本文介绍了如何使用Vue搭建一个移动端购物车界面，最终实现的功能包括：

1. 选择要最终购买的物品
2. 选择每件物品购买的数量
3. 实时更新所选择物品的总价格

HTML部分

首先给出HTML部分代码和注释，显示了整个界面的结构。

<body> 
 <div class="checkout"> 
 <div id="app"> 
 <div class="container"> 
 <div class="cart"> 
 <div class="checkout-title"> 
 <span>购物车</span> 
 </div> 
 
 <!-- table --> 
 <div class="item-list-wrap"> 
 <divclassdivclass="cart-item"> 
 <divclassdivclass="cart-item-head"> 
 <ul> 
 <li>商品信息</li> 
 <li>商品金额</li> 
 <li>商品数量</li> 
 <li>总金额</li> 
 <li>编辑</li> 
 </ul> 
 </div> 
 <ulclassulclass="cart-item-list"> 
 <!--productList在Vue组件中的data定义，包含全部数据，使用v-for进行遍历显示--> 
 <li v-for="item inproductList"> 
 <divclassdivclass="cart-tab-1"> 
 <divclassdivclass="cart-item-check"> 
 <!--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)"> 
 <svgclasssvgclass="icon icon-ok"><usexlink:hrefusexlink:href="#icon-ok"></use></svg> 
 </a> 
 </div> 
 <divclassdivclass="cart-item-pic"> 
 <imgv-bind:srcimgv-bind:src="item.productImage" alt="烟"> 
 </div> 
 <divclassdivclass="cart-item-title"> 
 <divclassdivclass="item-name">{{ item.productName }}</div> 
 </div> 
 <divclassdivclass="item-include"> 
 <dl> 
 <dt>赠送:</dt> 
 <ddv-forddv-for="part in item.parts"v-text="part.partsName"></dd> 
 </dl> 
 </div> 
 </div> 
 <divclassdivclass="cart-tab-2"> 
 <!--使用过滤器，|后面加Vue组件filter中定义的过滤器名称--> 
 <divclassdivclass="item-price">{{ item.productPrice |formatMoney}}</div> 
 </div> 
 <divclassdivclass="cart-tab-3"> 
 <divclassdivclass="item-quantity"> 
 <divclassdivclass="select-self select-self-open"> 
 <divclassdivclass="quantity"> 
 <!--绑定changeMoney()方法，调整商品数量--> 
 <ahrefahref="javascript:;"@click="changeMoney(item,-1)">-</a> 
 <inputtypeinputtype="text" :value="item.productQuantity" disabled> 
 <ahrefahref="javascript:;"@click="changeMoney(item,1)">+</a> 
 </div> 
 </div> 
 <divclassdivclass="item-stock">有货</div> 
 </div> 
 </div> 
 <divclassdivclass="cart-tab-4"> 
 <divclassdivclass="item-price-total">{{ item.productPrice*item.productQuantity| money('元')}}</div> 
 </div> 
 <div class="cart-tab-5"> 
 <divclassdivclass="cart-item-operation"> 
 <!--delConfirm方法控制删除时的弹框显示状态--> 
 <ahrefahref="javascript:void 0" class="item-edit-btn"@click="delConfirm(item)"> 
 <svg class="iconicon-del"><use xlink:href="#icon-del"></use></svg> 
 </a> 
 </div> 
 </div> 
 </li> 
 </ul> 
 </div> 
 </div> 
 
 <!-- footer --> 
 <div class="cart-foot-wrap"> 
 <divclassdivclass="cart-foot-l"> 
 <divclassdivclass="item-all-check"> 
 <ahrefahref="javascript:void 0"> 
 <spanclassspanclass="item-check-btn" :class="{'check':checkAllFlag}"@click="checkAll(true)"> 
 <svg class="iconicon-ok"><usexlink:hrefusexlink:href="#icon-ok"></use></svg> 
 </span> 
 <span v-show="!checkAllFlag">全选</span> 
 </a> 
 </div> 
 <divclassdivclass="item-all-del"> 
 <ahrefahref="javascript:void 0" class="item-del-btn"@click="checkAll(false)"> 
 <spanv-showspanv-show="checkAllFlag">取消全选</span> 
 </a> 
 </div> 
 </div> 
 <divclassdivclass="cart-foot-r"> 
 <divclassdivclass="item-total"> 
 <!--totalMoney是商品总金额，在Vue组件中通过方法被修改--> 
 Item total: <span class="total-price">{{totalMoney| money('元')}}</span> 
 </div> 
 <divclassdivclass="next-btn-wrap"> 
 <ahrefahref="address.html" class="btn btn--red" style="width:200px">结账</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}"> 
 <div class="md-modal-inner"> 
 <div class="md-top"> 
 <!--关闭按钮，通过改变delFlag值控制弹框状态--> 
 <buttonclassbuttonclass="md-close" @click="delFlag = false">关闭</button> 
 </div> 
 <div class="md-content"> 
 <divclassdivclass="confirm-tips"> 
 <pidpid="cusLanInfo">你确认删除此订单信息吗?</p> 
 </div> 
 <div class="btn-wrapcol-2"> 
 <!--选择yes则调用delProduct删除元素--> 
 <button class="btnbtn--m" id="btnModalConfirm"@click="delProduct">Yes</button> 
 <button class="btnbtn--m btn--red" id="btnModalCancel"@click="delFlag=false">No</button> 
 </div> 
 </div> 
 </div> 
 </div> 
 <!--遮罩层，整个都是通过delFlag进行控制的，v-if根据表达式的真假条件渲染元素--> 
 <div class="md-overlay"v-if="delFlag"></div> 
 
 </div> 
 </div> 
</body>

对应的关键注释在代码中给出，下面结合Vue.js的代码，对主要部分进行解释。

一、Vue组件基本格式

一个Vue组件的基本代码如下：

new Vue({ 
 el:'#app', 
 data: {}, 
 filters: {}, 
 mounted: function() {}, 
 methods: {} 
});

在JS代码中，使用new Vue即可声明一个Vue组件。Vue组件主要包括以下几个字段。
1. el字段：el字段用来定义该组件在HTML中的哪个位置生效，需要传入HTML中某个元素的id值。这里传入了#app，表示HTML中id为app的元素内部都是这个Vue组件的作用范围。
2. data字段：data字段定义了Vue组件中的数据，可能在HTML中进行渲染。在本应用中，商品的价格、名称、图片链接等信息，都是使用Vue组件中data字段内的数据进行渲染的。
3. filter字段：filter字段是一个过滤器，在本应用中，针对价格等需要格式化的文本，就可以使用filter进行过滤。
4. mounted字段：mounted字段通常定义一个方法，这个方法将在页面加载完成时自动执行，在React等框架中都有类似的机制。
5. method字段：method字段用来定义Vue组件中需要用到的方法，这个字段的内容往往是需要投入时间最多的部分，例如页面中选择商品、增加数量等逻辑，都是在这个字段中进行编辑的。