溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

Vue怎么實(shí)現(xiàn)移動(dòng)端購(gòu)物車(chē)界面

發(fā)布時(shí)間：2022-11-17 09:13:29 來(lái)源：億速云 閱讀：168 作者：iii 欄目：開(kāi)發(fā)技術(shù)

今天小編給大家分享一下Vue怎么實(shí)現(xiàn)移動(dòng)端購(gòu)物車(chē)界面的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

HTML部分

首先給出HTML部分代碼和注釋?zhuān)@示了整個(gè)界面的結(jié)構(gòu)。

<body> 
 <div class="checkout"> 
  <div id="app"> 
  <div class="container"> 
   <div class="cart"> 
   <div class="checkout-title"> 
    <span>購(gòu)物車(chē)</span> 
   </div> 
 
   <!-- table --> 
   <div class="item-list-wrap"> 
    <divclassdivclass="cart-item"> 
    <divclassdivclass="cart-item-head"> 
     <ul> 
     <li>商品信息</li> 
     <li>商品金額</li> 
     <li>商品數(shù)量</li> 
     <li>總金額</li> 
     <li>編輯</li> 
     </ul> 
    </div> 
    <ulclassulclass="cart-item-list"> 
     <!--productList在Vue組件中的data定義，包含全部數(shù)據(jù)，使用v-for進(jìn)行遍歷顯示--> 
     <li v-for="item inproductList"> 
     <divclassdivclass="cart-tab-1"> 
      <divclassdivclass="cart-item-check"> 
      <!--Vue2.0中想為HTML標(biāo)簽綁定屬性，必須使用v-bind:，綁定內(nèi)容為對(duì)象，這里為a標(biāo)簽綁定check屬性，屬性值為item中的checked值--> 
      <!--@click是v-on:click的縮寫(xiě)，為這個(gè)按鈕綁定了點(diǎn)擊事件，對(duì)應(yīng)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>贈(zèng)送:</dt> 
       <ddv-forddv-for="part in item.parts"v-text="part.partsName"></dd> 
      </dl> 
      </div> 
     </div> 
     <divclassdivclass="cart-tab-2"> 
      <!--使用過(guò)濾器，|后面加Vue組件filter中定義的過(guò)濾器名稱(chēng)--> 
      <divclassdivclass="item-price">{{ item.productPrice |formatMoney}}</div> 
     </div> 
     <divclassdivclass="cart-tab-3"> 
      <divclassdivclass="item-quantity"> 
      <divclassdivclass="select-self select-self-open"> 
       <divclassdivclass="quantity"> 
       <!--綁定changeMoney()方法，調(diào)整商品數(shù)量--> 
       <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方法控制刪除時(shí)的彈框顯示狀態(tài)--> 
      <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組件中通過(guò)方法被修改--> 
     Item total: <span class="total-price">{{totalMoney| money('元')}}</span> 
    </div> 
    <divclassdivclass="next-btn-wrap"> 
     <ahrefahref="address.html" class="btn btn--red" >結(jié)賬</a> 
    </div> 
    </div> 
   </div> 
   </div> 
  </div> 
 
  <!--綁定一個(gè)md-show類(lèi)，通過(guò)delFlag變量控制這個(gè)類(lèi)，這個(gè)類(lèi)可以讓彈框顯示或隱藏--> 
  <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"> 
    <!--關(guān)閉按鈕，通過(guò)改變delFlag值控制彈框狀態(tài)--> 
    <buttonclassbuttonclass="md-close" @click="delFlag = false">關(guān)閉</button> 
   </div> 
   <div class="md-content"> 
    <divclassdivclass="confirm-tips"> 
    <pidpid="cusLanInfo">你確認(rèn)刪除此訂單信息嗎?</p> 
    </div> 
    <div class="btn-wrapcol-2"> 
    <!--選擇yes則調(diào)用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> 
  <!--遮罩層，整個(gè)都是通過(guò)delFlag進(jìn)行控制的，v-if根據(jù)表達(dá)式的真假條件渲染元素--> 
  <div class="md-overlay"v-if="delFlag"></div> 
 
  </div> 
 </div> 
</body>

對(duì)應(yīng)的關(guān)鍵注釋在代碼中給出，下面結(jié)合Vue.js的代碼，對(duì)主要部分進(jìn)行解釋。 

一、Vue組件基本格式

一個(gè)Vue組件的基本代碼如下：

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

在JS代碼中，使用new Vue即可聲明一個(gè)Vue組件。Vue組件主要包括以下幾個(gè)字段。
1.  el字段：el字段用來(lái)定義該組件在HTML中的哪個(gè)位置生效，需要傳入HTML中某個(gè)元素的id值。這里傳入了#app，表示HTML中id為app的元素內(nèi)部都是這個(gè)Vue組件的作用范圍。
2. data字段：data字段定義了Vue組件中的數(shù)據(jù)，可能在HTML中進(jìn)行渲染。在本應(yīng)用中，商品的價(jià)格、名稱(chēng)、圖片鏈接等信息，都是使用Vue組件中data字段內(nèi)的數(shù)據(jù)進(jìn)行渲染的。
3. filter字段：filter字段是一個(gè)過(guò)濾器，在本應(yīng)用中，針對(duì)價(jià)格等需要格式化的文本，就可以使用filter進(jìn)行過(guò)濾。
4. mounted字段：mounted字段通常定義一個(gè)方法，這個(gè)方法將在頁(yè)面加載完成時(shí)自動(dòng)執(zhí)行，在React等框架中都有類(lèi)似的機(jī)制。
5. method字段：method字段用來(lái)定義Vue組件中需要用到的方法，這個(gè)字段的內(nèi)容往往是需要投入時(shí)間最多的部分，例如頁(yè)面中選擇商品、增加數(shù)量等邏輯，都是在這個(gè)字段中進(jìn)行編輯的。
以上就是一個(gè)vue組件的主要組成部分，下面對(duì)各個(gè)部分功能的代碼編寫(xiě)進(jìn)行簡(jiǎn)要介紹。 

二、數(shù)據(jù)渲染

數(shù)據(jù)渲染部分，要渲染的數(shù)據(jù)都存放在data中。每一個(gè)商品的信息都被模擬存儲(chǔ)在了cart.json的文件中。我們可以實(shí)現(xiàn)數(shù)據(jù)自動(dòng)加載，基本思路是：在method字段中定義一個(gè)方法，用來(lái)加載cart.json中的數(shù)據(jù)，并將其存放到data字段中定義的對(duì)應(yīng)變量中。在mouted字段中，自動(dòng)調(diào)用這個(gè)方法。這樣就實(shí)現(xiàn)了頁(yè)面加載完成后自動(dòng)加載數(shù)據(jù)。對(duì)應(yīng)的JS代碼和注釋如下：

data: { 
 //存放商品json數(shù)據(jù)信息 
 productList: [] 
 } 
methods: { 
  //cartView()方法用來(lái)加載數(shù)據(jù)，并將數(shù)據(jù)存儲(chǔ)在這個(gè)Vue組件中的productList變量中 
  cartView: function() { 
  var _this = this; 
  //使用vue-resource模塊加載數(shù)據(jù)，類(lèi)似Jquery中的AJAX，返回?cái)?shù)據(jù)存放在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() { 
 //執(zhí)行代碼放在$nextTick中，保證頁(yè)面結(jié)構(gòu)加載完畢后再執(zhí)行函數(shù) 
 this.$nextTick(function() { 
  this.cartView(); //使用this調(diào)用methods中定義的cartView()方法 
 }) 
 }

完成了這部分代碼，所有商品的數(shù)據(jù)就存放在了組件中變量名為productList的字段中。
在前端HTML部分的進(jìn)行調(diào)用，需要使用v-for指令。這個(gè)指令用來(lái)循環(huán)遍歷Vue中的數(shù)據(jù)，代碼如下：

<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>贈(zèng)送:</dt> 
   <dd v-for="part in item.parts"v-text="part.partsName"></dd> 
  </dl> 
  </div> 
 </div> 
</ul>

通過(guò)v-for指令，遍歷了變量productList中的數(shù)據(jù)，并在內(nèi)部的HTML中調(diào)用。利潤(rùn)item.productImage獲取對(duì)應(yīng)圖片URL地址；item.productName獲取商品名稱(chēng)等。這樣，就自動(dòng)生成了一個(gè)商品信息列表。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。

以上就是“Vue怎么實(shí)現(xiàn)移動(dòng)端購(gòu)物車(chē)界面”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手