Vue.js實現(xiàn)開發(fā)購物車功能的方法詳解

更新時間：2019年02月22日 12:10:06 作者：deniro_li

這篇文章主要介紹了Vue.js實現(xiàn)開發(fā)購物車功能的方法,結(jié)合實例形式分析了基于vue.js開發(fā)的購物車功能相關(guān)操作步驟與實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了Vue.js實現(xiàn)開發(fā)購物車功能的方法。分享給大家供大家參考，具體如下：

購物車一般包含商品名稱、單價、數(shù)量等信息，數(shù)量可以任意新增或減少，商品項也可刪除，還可以支持全選或多選：

我們把這個小項目分為三個文件：

index.html （頁面）
index.js （Vue 腳本）
style.css （樣式）

1 index.js

首先在 js 中初始化 Vue 實例，整體模板如下：

var app = new Vue({
 el: '#app',
 data: {
  ...
 },
 mounted: function () {
  ...
 },
 computed: {
  ...
 },
 methods: {
  ...
 }
});

一般來說，這里的 data 來源于服務(wù)端數(shù)據(jù)，這里為了簡便，所以直接定義好的數(shù)據(jù)：

data: {
  /**
   * 購物車中的商品列表
   */
  list: [
   {
    id: 1,
    name: '韓國進口海牌海苔',
    price: 39.9,
    count: 1
   },
   {
    id: 2,
    name: '印尼進口 Nabati 麗巧克（Richoco）休閑零食 巧克力味 威化餅干',
    price: 11.8,
    count: 1
   },
   {
    id: 3,
    name: '菲律賓進口 道吉草 奶油夾',
    price: 6.5,
    count: 1
   }
  ],
  //選中的商品列表，用于計算總價
  checkList: []
 }

list 用于展示購物車中的商品列表。

checkList 用于表示勾選中的商品列表，后面，我們會利用它來計算選中商品的總價。

mounted: function () {
  //默認(rèn)全選
  this.checkAll();
  this.checkAllElement(document.querySelector(".checkAll"));
}

當(dāng) mounted 時，默認(rèn)全選購物車內(nèi)的所有商品。

computed: {
 /**
 * 總價
 * @returns {string}
 */
 totalPrice: function () {
 var total = 0;
 for (var i = 0; i < this.checkList.length; i++) {
 var item = this.checkList[i];
 total += item.price * item.count;
 }
 return total.toLocaleString();
 }
}

在計算屬性中，我們定義了總價的計算方式，它會綁定勾選的 checkList 來計算總價。之所以使用 toLocaleString 方法，是因為小數(shù)部分會自動四舍五入，而且還會以千分位表示出來，很方便哦O(∩_∩)O~

methods: {
 /**
 * 減少購買數(shù)量
 * @param index
 */
 reduceCount: function (index) {
 if (this.list[index].count === 1) return;
 this.list[index].count--;
 },
 /**
 * 增加購買數(shù)量
 * @param index
 */
 addCount: function (index) {
 this.list[index].count++;
 },
 /**
 * 移除商品
 * @param index
 */
 remove: function (index) {
 console.log("remove-index:" + index);
 this.list.splice(index, 1);
 //獲取商品序號
 var id = index + 1;
    //移除實際參與計算的商品
 var $checkList = this.checkList;
 for (var i = 0; i < $checkList.length; i++) {
 var item = $checkList[i];
 if (item.id == id) {
 $checkList.splice(i, 1);
 }
 }
 },
 /**
 * 全選或全不選
 * @param event
 */
 checkAllOrNot: function (event) {
 if (event.target.checked) {//全選
 this.checkAll();
 console.log("checkList：" + this.checkList);
 } else { // 全不選
 console.log("全不選");
 this.checkInItems('noCheckAll');
 this.checkList.splice(0);//清空數(shù)組
 }
 },
 /**
 * 全選
 */
 checkAll: function () {
 console.log("全選");
 this.checkInItems('checkAll');
 this.checkList = this.list.concat();//復(fù)制商品列表
 },
 /**
 * 全選或全不選
 * @param type checkAll：全選；其他：全不選
 */
 checkInItems: function (type) {
 var items = document.querySelectorAll('.checkItem');
 for (var i = 0; i < items.length; i++) {
 var item = items[i];
 if (type === 'checkAll') {
 item.checked = true;
 } else {
 item.checked = false;
 }
 }
 },
 /**
 * 勾選或不勾選
 */
 checkItem: function (event, index) {
 console.log("checkItem");
 var element = event.target;
 var $allCheck = document.querySelector(".checkAll");
 if (element.checked) {//勾選，加入已選擇列表
 this.checkList.push(this.list[index]);
 this.checkAllElement($allCheck);
 } else {//不勾選，從已選擇列表中去除
 this.checkList.splice(index, 1);
 $allCheck.checked = false;
 }
 },
 /**
 * 勾選全選框
 * @param element
 */
 checkAllElement: function (element) {
 //如果所有的商品都已被勾選，則勾選全選框
 if (this.checkList.length == this.list.length) {
 element.checked = true;
 }
 }
}

在 methods 中，我們定義了以下功能方法：

減少與增加購買數(shù)量。在減少購買數(shù)量方法中，我們對當(dāng)前所對應(yīng)商品的數(shù)量進行了二次確認(rèn)，讓代碼變得更加健壯（HTML 模板可能被修改，button 被替換為 div 或者 span，那么 disabled 樣式就變得無效啦）。

移除某件商品。因為購物車中的商品列表與實際勾選的商品列表數(shù)量上有可能存在差異，所以我們必須通過找到商品 ID 再進行刪除。

勾選相關(guān)操作（全選、全不選、單選、單不選等）

2 style.css

[v-cloak] {
 display: none;
}
table {
 border: 1px solid #e9e9e9;
 border-collapse: collapse;
 border-spacing: 0;
 empty-cells: show;
}
th {
 font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 color: #4f6b72;
 border-right: 1px solid #C1DAD7;
 border-bottom: 1px solid #C1DAD7;
 border-top: 1px solid #C1DAD7;
 letter-spacing: 2px;
 text-transform: uppercase;
 text-align: left;
 padding: 6px 6px 6px 12px;
 background: #CAE8EA;
}
td {
 border-right: 1px solid #C1DAD7;
 border-bottom: 1px solid #C1DAD7;
 background: #fff;
 font-size:14px;
 padding: 6px 6px 6px 12px;
 color: #4f6b72;
}

這里定義了 v-cloak 樣式，用于解決網(wǎng)絡(luò)慢時的閃屏問題。還定義了表格的相關(guān)樣式。

3 index.html

接著在 index.html 中引入 Vue 腳本與樣式文件。基本模板如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>購物車</title>
 <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" >
</head>
<body>
<div id="app" v-cloak>
 ...
</div>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="index.js"></script>
</body>
</html>

因為有可能購物車中的商品被全部刪除，所以我們在此加了判斷，如果列表為空，則給出友好提示：

<template v-if="list.length">
 ...
</template>
<!--當(dāng)購物車為空時，則提示-->
<div v-else>購物車內(nèi)暫時沒有商品</div>

接著用 table 來展示購物車內(nèi)的商品列表：

<table>
 <thead>
 <tr>
 <th><input id="checkAll" type="checkbox" class="checkAll" @click="checkAllOrNot($event)"></th>
 <th>序號</th>
 <th>商品</th>
 <th>單價</th>
 <th>數(shù)量</th>
 <th>操作</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="(item,index) in list">
 <td><input type="checkbox" class="checkItem" @click="checkItem($event,index)"></td>
 <td>{{index+1}}</td>
 <td>{{item.name}}</td>
 <td>{{item.price}}</td>
 <td>
 <button @click="reduceCount(index)" :disabled="item.count===1">-</button>
 {{item.count}}
 <button @click="addCount(index)">+</button>
 </td>
 <td>
 <button @click="remove(index)">刪除</button>
 </td>
 </tr>
 </tbody>
</table>
<div>總價：￥{{totalPrice}}</div>

使用 v-for 指令，循環(huán)迭代出商品列表。

表格內(nèi)的每一個勾選框與按鈕都綁定了相應(yīng)的事件。全選框與每一行的勾選框還傳入了原生 DOM 事件 $event，用于獲取當(dāng)前所操作的元素。

*這里對減少商品數(shù)量的按鈕進行了判斷，當(dāng)相應(yīng)商品的數(shù)量只剩下一個時，綁定 disabled 樣式，讓它變成不可用。

4 演示