前端处理后端返回的字典值

javascript 复制代码
<template>
  <div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      data: {
        10: '北京',
        110: '山东'
      },
      optionsData: []
    }
  },
  methods: {
    tranFn() {
      console.log('data>>>', this.data)
      const arr = []
      for (let i = 0; i < Object.keys(this.data).length; i++) {
        arr.push({ value: Object.keys(this.data)[i], label: this.data[Object.keys(this.data)[i]] })
      }
      console.log('arr>>>', arr)
      this.optionsData = arr
    }
  },
  created () {
    this.tranFn()
  }
}
</script>

<style>

</style>
相关推荐
C_心欲无痕9 分钟前
理解前端的运行时与编译时
前端
38242782712 分钟前
JS正则表达式实战:核心语法解析
开发语言·前端·javascript·python·html
一只小阿乐12 分钟前
vue-web端网站 滑动进行分页
前端·javascript·vue.js·vue·分页
零度@14 分钟前
2026 轻量级消息队列 Redis Stream
前端·redis·bootstrap
大飞哥~BigFei32 分钟前
新版chrome浏览器安全限制及解决办法
java·前端·chrome·安全·跨域
hepingfly34 分钟前
SEO 如何寻找关键词?
前端
IT_陈寒36 分钟前
SpringBoot 3.2实战:5个性能优化技巧让你的应用提速50%
前端·人工智能·后端
扶苏100243 分钟前
前端js高频面试点汇总
开发语言·前端·javascript
firstacui44 分钟前
Keepalived 双主热备和三主热备
前端·chrome
小二·1 小时前
Python Web 开发进阶实战:微前端架构初探 —— 基于 Webpack Module Federation 的 Vue 微应用体系
前端·python·架构