当前位置:   article > 正文

Object.entries方法的使用

Object.entries方法的使用

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组

有以下需求:

  1. let cpuData = reactive([
  2. { label: '总量', content: 'test' },
  3. { label: '已使用', content: 'test' },
  4. { label: '未使用', content: 'test' }
  5. ])
  6. <el-form label-position="left" label-width="auto" class="center">
  7. <el-form-item v-for="item in cpuData" :key="item.content"
  8. :label="item.label">{{item.content}}</el-form-item>
  9. </el-form>

效果如下:

但是content的数据是从后端传来的(即图中的test),写成以上的数据结构后端不好传值,

只能cpuData[0].content='XXX',cpuData[1].content='XXXX',这样语义性不好,后面不好维护

改进方法---------------------------------------------------------------------------------------------------------------

  1. let memoryData =reactive( {
  2. 'Num':{label: '总量', content: 'test'},
  3. 'Use':{label: '已使用', content: 'test'},
  4. 'unUse':{label: '未使用', content: 'test'}
  5. })
  6. <el-form label-position="left" label-width="auto" class="center">
  7. <el-form-item v-for="item in Object.entries(memoryData)" :key="item[1].content"
  8. :label="item[1].label">{{item[1].content}}</el-form-item>
  9. </el-form>

这样的话,既可以循环,赋值的时候语义性也更好,memoryData.Num.content='XXX'

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/656393
推荐阅读
相关标签
  

闽ICP备14008679号