vue商城購物車功能開發(含動圖)

購物車不管實在衆多的電商網站還是手機APP中都很常見，它的實作邏輯也是相對複雜的。購物車作為元件開發，在其他應用或者頁面也可以拿來直接使用。包含如下功能：

• 購物車模闆
• 商品數量加減
• 商品總價結算
• 商品删除
• 商品全選反選

實作效果如下：

1.購物車頁面模闆實作

1. 引入bootstrap

   購物車的頁面不再使用html一點點的寫，這裡使用bootstrap，比較節省時間。是以要引入bootstrap，可以在BootCDN複制連結，如下：

   

   

2. 使用bootstrap的面闆元件建構頁面

   選擇帶标題的面闆和帶表格的面闆及有腳注的面闆結合，因為購物車頁面需要有标題的表格，也需要有總價結算這樣一個腳注欄。

   使用bootstrap一個優點就是隻需要填寫對應的class即可。如面闆類

   .panel

   ，面闆标題類

   .panel-heading

   .panel-title和主體

   .panel-body

   。具體使用可以參考bootstrap官網。

   寫的購物車模闆如下圖：

   

   代碼如下：

   <div class="container" id="app">
   	<div class="row">
   		<!-- bootstrap的面闆元件包含帶标題的面闆、帶表格的面闆燈 -->
   		<div class="panel panel-default">
   			<div class="panel-heading">
   				<h3 class="panel-title">我的購物車</h3>
   			</div>
   			<div class="panel-body">
   				<!-- 帶表格的面闆 table-hover:滑鼠懸停高亮的表格-->
   				<table class="table table-hover">
   					<thead>
   						<tr>
   							<th><input type="checkbox"></th>
   							<th>商品名稱</th>
   							<th>商品單價</th>
   							<th>購買數量</th>
   							<th>小計</th>
   							<th>商品操作</th>
   						</tr>
   					</thead>
   					<tbody>
   						<tr>
   							<td>
   								<input type="checkbox">
   							</td>
   							<td>1</td>
   							<td>1</td>
   							<td>1</td>
   							<td>1</td>
   							<td>
   								<div class="btn-group btn-group-sm">
   									<button class="btn btn-danger" type="button">删除</button>
   								</div>
   							</td>
   						</tr>
   
   					</tbody>
   				</table>
   			</div>
   			<!-- 帶腳注的面闆 -->
   			<div class="panel-footer" style="text-align: right;">
   				共計<span>100元</span>
   			</div>
   		</div>
   	</div>
   </div>
              

2.購物車頁面模闆實作

1. 模拟購物車資料

   前端先自己模拟資料，如下：

   data: {
   	//模拟購物車資料
   	goods: [
   		{id:1,name:'極米 （XGIMI ）Play特别版 投影機 投影儀 家用 便攜（單手可握 側投 HDR10解碼哈曼卡頓音響内置電池）',price:2499,num:1},
   		{id:2,name:'榮耀MagicBook 2019 14英寸輕薄窄邊框筆記本電腦（AMD銳龍7 3700U 8G 512G FHD IPS 指紋解鎖）冰河銀',price:4985,num:1},
   		{id:3,name:'盼盼 手撕面包 餅幹蛋糕整箱大禮包箱裝 奶香味2000g',price:52.5,num:2},
   		{id:4,name:'洗面乳洗面乳洗面乳洗面乳洗面乳洗面乳洗面乳洗面乳',price:56,num:3},
   		{id:5,name:'聯想 K5 Note 4GB+64GB 6英寸全面屏雙攝手機 全網通 移動4G+ 雙卡雙待 極地黑',price:999,num:1},
   		{id:6,name:'小米MIX2 全面屏遊戲手機 6GB+64GB 黑色 全網通4G手機 雙卡雙待 5.99"大屏',price:1299,num:1},
   		{id:7,name:'Apple MacBook Pro 15.4英寸筆記本電腦 銀色（2017款Multi-Touch Bar/Core',price:15888,num:1},
   		{id:8,name:'OPPO R15 全面屏雙攝拍照手機 4G+128G 幻色粉 全網通 移動聯通電信',price:2799,num:1},
   	]
   }
              

2. 資料循環渲染到頁面中

   在每一行處，即

   <tr>

   标簽處使用v-for指令循環讀取資料。然後使用item取商品資訊。如下：

   

   渲染後的結果為：

   

3.購物車數量加減删除及總價實作

• 3.1 商品數量的增加

  商品數量增加是給加号+綁定點選事件，每點選+一次即商品的數量num加1，通過v-model綁定商品的數量num，點選加号+一次，框中數字就會加1。這就實作了資料的雙向綁定。如下：

  

  實作方法：

  

• 3.2 商品數量的減少

  商品的減少與商品的增加實作類似，即是對減号-綁定點選事件，事件的方式是商品數量num的自減，input框中數字已認證v-model雙向綁定。

  不同點是當數量小于1件時，删除商品資訊。是以要做一個判斷。當商品全部删除完以後，商品購物車清單不需要再呈現出來，是以也要進行一次判斷。如下：

  

  

• 3.3 商品的删除

  商品的删除最為簡單，隻需要給删除按鈕綁定點選事件，如下：

  

  實作方法：

  

  【splice方法】：

  splice() 方法向/從數組中添加/删除項目，然後傳回被删除的項目。該方法會改變原始數組。

  splice() 方法可删除從 index 處開始的零個或多個元素，并且用參數清單中聲明的一個或多個值來替換那些被删除的元素。

• 3.4 商品的總價計算

  總價就是商品數量與商品價格的乘積，總價的計算使用vue的計算屬性，如下：

  

  調用總價計算函數：

  

經過上面幾步實作功能如下：

4.購物車全選反選實作

判斷全選的方法是建立一個數組，點選選中一個商品時，這個商品的id就會push進建立的數組，當所有商品的id都在數組中時，說明全選了，反之，數組是空時說明沒有商品被選中。

綜上分析需要對全選框綁定selectAll全選事件，對每個商品前的選擇框綁定單選事件select。如下：

方法如下：

購物車内商品選中狀态影響總價，因為隻需要計算選中商品的價格。是以需要修改總價函數，如下：

4.完善，添加商品圖檔

可以根據需求添加上商品的圖檔，隻需要在模拟的資料中加上圖檔選項，如下：

綁定商品名稱時綁定上商品圖檔，如下：

得到結果為：

至此，購物車算是基本功能完成了，可以再根據需求及美化頁面做一些複雜的處理。

本項目源碼：vue商城項目源碼

每天進步一點點、充實一點點、加油！！！