SKU是指“Stock Keeping Unit(庫(kù)存量單位)”，是商品管理領(lǐng)域的一個(gè)通用概念，是一個(gè)商品單位的編碼規(guī)范。基于Vue實(shí)現(xiàn)SKU功能，可以增強(qiáng)電商平臺(tái)的商品規(guī)格選擇和管理，讓用戶更加方便選擇合適的商品。

使用Vue實(shí)現(xiàn)SKU，最重要的是要使用data屬性來(lái)定義商品的數(shù)據(jù)結(jié)構(gòu)，并在Vue的實(shí)例對(duì)象中進(jìn)行數(shù)據(jù)綁定。在定義數(shù)據(jù)結(jié)構(gòu)時(shí)，需要先定義商品的基本屬性（商品庫(kù)存、商品價(jià)格、商品規(guī)格等）和具體的規(guī)格。將這兩部分?jǐn)?shù)據(jù)分別放在SKU的數(shù)據(jù)對(duì)象中。

let sku = {
stock: 100,
price: 99,
spec: {
color: ['紅色', '藍(lán)色', '黃色'],
size: ['M', 'L', 'XL']
},
attr: {}
};

商品的規(guī)格屬性，包括顏色、尺碼等等，都可以通過(guò)Vue的v-for指令來(lái)遍歷或者輸出。在Vue的實(shí)例對(duì)象中進(jìn)行雙向綁定時(shí)，可以使用v-model指令來(lái)實(shí)現(xiàn)。在用戶對(duì)某一商品規(guī)格進(jìn)行選擇時(shí)，將該規(guī)格屬性加入到商品屬性中，并根據(jù)商品屬性計(jì)算庫(kù)存和價(jià)格。

{{ key }}
{{ v }}

在計(jì)算庫(kù)存和價(jià)格時(shí)，需要首先定義一個(gè)函數(shù)，根據(jù)商品屬性計(jì)算出符合條件的商品庫(kù)存和價(jià)格。對(duì)每一次用戶選擇進(jìn)行一次調(diào)用，從而實(shí)現(xiàn)動(dòng)態(tài)更新庫(kù)存和價(jià)格的效果。

function getGoodsAttr(attr) {
let i = sku.stockList.findIndex(i =>i.attr.toString() == attr.toString());
if (i != -1) {
return {
stock: sku.stockList[i].stock,
price: sku.stockList[i].price
};
}
return {
stock: 0,
price: 0
};
}

在Vue的實(shí)例對(duì)象中，定義watch監(jiān)聽屬性變化，并在變化后進(jìn)行重新計(jì)算庫(kù)存、價(jià)格的操作。這樣就可以實(shí)現(xiàn)SKU的功能。使用Vue實(shí)現(xiàn)SKU，使得整個(gè)頁(yè)面更加動(dòng)態(tài)、實(shí)用，也無(wú)需頻繁刷新以獲取最新的庫(kù)存和價(jià)格信息。