本文介绍了如何使用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>
内容版权声明：除非注明，否则皆为本站原创文章。