前端将后端返回的数字(英文字母),转成对应的文字进行显示 |
您所在的位置:网站首页 › e站的标签改为中文 › 前端将后端返回的数字(英文字母),转成对应的文字进行显示 |
前言
类似于省市区,状态,性别之类的可以枚举出来的变量,一般情况下数据库中存储的是其对应的value值,像省市区联动的话,前端界面中显示的是省市区的名字,但是接口的入参一般是对应的code码;如果界面中需要状态的话,类似于我这种的稿件状态:草稿、待审批等,接口返回的不是草稿这样的文字,而是DRAFT这样的英文标识。那问题就来了,前端如何将后端返回的数字或英文字母,转成对应的文字进行显示呢? 枚举类型后端返回的数据中有英文标识,具体标识如下: "status": { "DRAFT": "草稿", "APPROVAL_PENDING": "待审稿", "RE_APPROVAL_PENDING": "重投待审稿", "APPROVE": "审稿通过等待编辑部处理" },在之后请求接口中,如果我遇到了DRAFT,我就应该在前端显示草稿。 map定义字典的方式1.在data中定义变量 status: { DRAFT: "草稿", APPROVAL_PENDING: "待审稿", RE_APPROVAL_PENDING: "重投待审稿", APPROVE: "审稿通过等待编辑部处理" }2.界面中使用的方式 {{status['DRAFT']}}其中,DRAFT是后端返回的内容,根据该内容去找status中对应的值。 三元表达式该方式一般适用于只有两种情况的,非一即二的这种,如下: sex == '1' ? '男' : '女'在这里有多种情况,如果我用了map方法,依次处理后端返回的数据: this.tableData.map(item => { if (item.status == "DRAFT") { item.status = "草稿"; } else if (item.status == "APPROVAL_PENDING") { item.status = "待审批"; } else if (item.status == "APPROVE") { item.status = "审批通过等待编辑部处理"; } else { item.status = "编辑部已拒稿"; } return item; }); 计算属性1.定义计算属性 computed: { sex: function() { return 1 == "1" ? "男" : "女"; // 第一个 1 换成后端返回的内容 } }2.界面中使用 {{sex}} 过滤器1.data中定义变量 status: "DRAFT"2.定义过滤器 filters: { capitalize: function(value) { if (value == "DRAFT") return "草稿"; } },3.界面中显示 {{status | capitalize}} 总结总结下来,我觉得第一种方式更为简洁,因为后续的三种方式,判断的内容一多的情况下,不可避免的会涉及到多层if的问题,但是具体使用哪个还是需要结合自己的业务需求的。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |