接口返回数字，如何转化为对应的文字渲染页面？

princessིྀ

已于 2023-03-15 09:38:32 修改

阅读量316

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

于 2023-03-14 19:19:11 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_49632420/article/details/129537396

博客讨论了如何在前端使用JavaScript和Vue.js将接口返回的数字转换为对应的文字并显示在页面上。通过创建映射数据对象并利用.map()方法实现数据转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
接口返回数字

接口返回数字，如何转化为对应的文字渲染页面

先把字符串转化为数组，声明一个mapData对象使键值一一对应，再用 .map()方法获取mapData对象中某键的值

	data() {
      return {
        mapData: { 1: '电路', 2: '变速箱', 3: '发动机', 4: '车身底盘', 5: '油路' },
      }
    },
    methods: {
    	initFn() {
    		this.$VoHttp.apiCompanyLegalSkill().then((res) => {
            this.companyInfo = res.data
            console.log(this.companyInfo.skillType) // 2,4
            let skillType = this.companyInfo.skillType.split(',')
            console.log(skillType) // ['2', '4']
            let string = ''
            skillType.map((item, index) => {
              if (index === 0) {
                string = this.mapData[item]
              } else {
                string = string + '/' + this.mapData[item]
              }
            })
            console.log(string) // 变速箱/车身底盘
          })
    	},
    },

打印结果