一、場景：根據後端返回的不用狀態碼，頁面顯示不同的內容，重點在於內容可以是自定義。

html部分： <text class="status-{{ statemap[item.status].style }} ">{{ statemap[item.status].name }}</text>

js定義在data中的自定義初始值：

statemap: {

001: { name: '待確認', style: 'red' },

002: { name: '已確認', style: 'blue' },

003: { name: '已關單', style: 'gray' },

004: { name: '已駁回', style: 'red' },

005: { name: '已作廢', style: 'blue' },

006: { name: '發貨中', style: 'gray' },

}

這樣，只要跟後端協定好這些狀態碼分別表示什麼內容就好了。

二、往後端返回的json陣列每一項新新增幾個欄位

const newData = res.data.map(n => Object.assign(n, { goodsId: n.id }));

三、後端返回的Json陣列，想push到新的數組裡，但是要更換一下key，vue不變

假如res.data.list = [{ id: "991", depotCode: "001", depotName: "測試11"},{id: "992", depotCode: "002", depotName: "測試22"}]
const arr = [];
const { depotName: label, id: value } = res.data.list
arr.push({ label, value })
console.log(arr) // [{ label: '測試11', value: 991}, { label: '測試22, value: 992}]

注： 參考es6變數解構：

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"