赞
踩
Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。
有以下需求:
- let cpuData = reactive([
- { label: '总量', content: 'test' },
- { label: '已使用', content: 'test' },
- { label: '未使用', content: 'test' }
- ])
-
- <el-form label-position="left" label-width="auto" class="center">
- <el-form-item v-for="item in cpuData" :key="item.content"
- :label="item.label">{{item.content}}</el-form-item>
- </el-form>
效果如下:
但是content的数据是从后端传来的(即图中的test),写成以上的数据结构后端不好传值,
只能cpuData[0].content='XXX',cpuData[1].content='XXXX',这样语义性不好,后面不好维护
改进方法---------------------------------------------------------------------------------------------------------------
- let memoryData =reactive( {
- 'Num':{label: '总量', content: 'test'},
- 'Use':{label: '已使用', content: 'test'},
- 'unUse':{label: '未使用', content: 'test'}
- })
-
- <el-form label-position="left" label-width="auto" class="center">
- <el-form-item v-for="item in Object.entries(memoryData)" :key="item[1].content"
- :label="item[1].label">{{item[1].content}}</el-form-item>
- </el-form>
这样的话,既可以循环,赋值的时候语义性也更好,memoryData.Num.content='XXX'
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。