溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關Vue.js如何搭建移動端購物車界面，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
本文介紹了如何使用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" >結賬</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組件中需要用到的方法，這個字段的內容往往是需要投入時間最多的部分，例如頁面中選擇商品、增加數量等邏輯，都是在這個字段中進行編輯的。
以上就是一個vue組件的主要組成部分，下面對各個部分功能的代碼編寫進行簡要介紹。
二、數據渲染
數據渲染部分，要渲染的數據都存放在data中。每一個商品的信息都被模擬存儲在了cart.json的文件中。我們可以實現數據自動加載，基本思路是：在method字段中定義一個方法，用來加載cart.json中的數據，并將其存放到data字段中定義的對應變量中。在mouted字段中，自動調用這個方法。這樣就實現了頁面加載完成后自動加載數據。對應的JS代碼和注釋如下：
data: {
//存放商品json數據信息
productList: []
}
methods: {
//cartView()方法用來加載數據，并將數據存儲在這個Vue組件中的productList變量中
cartView: function() {
var _this = this;
//使用vue-resource模塊加載數據，類似Jquery中的AJAX，返回數據存放在res.body中
this.$http.get("data/cartData.json", {"id":123}).then(function(res) {
_this.productList =res.body.result.list;
// _this.totalMoney = res.body.result.totalMoney;
});
}
}
mounted: function() {
//執行代碼放在$nextTick中，保證頁面結構加載完畢后再執行函數
this.$nextTick(function() {
this.cartView(); //使用this調用methods中定義的cartView()方法
})
}完成了這部分代碼，所有商品的數據就存放在了組件中變量名為productList的字段中。
在前端HTML部分的進行調用，需要使用v-for指令。這個指令用來循環遍歷Vue中的數據，代碼如下：
<ul class="cart-item-list">
<li v-for="item in productList">
<div class="cart-tab-1">
<div class="cart-item-check">
</div>
<div class="cart-item-pic">
<img v-bind:src="item.productImage" alt="煙">
</div>
<div class="cart-item-title">
<div class="item-name">{{ item.productName}}</div>
</div>
<div class="item-include">
<dl>
<dt>贈送:</dt>
<dd v-for="part in item.parts"v-text="part.partsName"></dd>
</dl>
</div>
</div>
</ul>通過v-for指令，遍歷了變量productList中的數據，并在內部的HTML中調用。利潤item.productImage獲取對應圖片URL地址；item.productName獲取商品名稱等。這樣，就自動生成了一個商品信息列表。
關于“Vue.js如何搭建移動端購物車界面”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
