本文介紹了如何使用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>
新聞熱點
疑難解答
圖片精選
