(vue)前端将接口返回的数字转换为对应文字显示

原创已于 2022-07-25 11:36:06 修改 · 2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2022-06-17 15:08:47 首次发布

VUE 专栏收录该内容

213 篇文章

订阅专栏

本文介绍了在Vue前端项目中如何将接口返回的数字类型数据转换为对应的文本展示。通过一个具体的例子展示了如何使用JavaScript封装函数，根据预设的映射关系（如：1对应'搜索'，2对应'问答'等）来转换表格数据，从而实现数据的友好展示。转换前后效果对比清晰，有助于理解此类操作在前端开发中的应用。

(vue)前端将接口返回的数字转换为对应文字显示

数据格式：

在这里插入图片描述

    //表格渲染
    dataRender() { 
       ...
       this.feedBackList = res.data.data.list; //表格绑定的数据
       this.switch(this.feedBackList); 
    },

    // 转换封装
    switch(val) { 
      for (var i = 0; i < val.length; i++) {
        if (val[i].type == "1") {
          val[i].type = "搜索";
        } else {
          val[i].type = "问答";
        }
        if (val[i].status == "1") {
          val[i].status = "满意";
        } else {
          val[i].status = "不满意";
        }
      }
    },