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

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

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

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

{{ key }}
{{ v }}

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

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