实战中前端开发技巧一

一、场景：根据后端返回的不用状态码，页面显示不同的内容，重点在于内容可以是自定义。

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"