本教程操作环境:windows7系统、vue3版,DELL G3电脑。最近通过对象相关知识的深入学习,我发现对象的遍历主要分为两种情况,一种是在页面中遍历,另外一种是在方法中遍历对象,现在我们就从这两种情况分别来遍历对象获取对象的key和v
本教程操作环境:windows7系统、vue3版,DELL G3电脑。
最近通过对象相关知识的深入学习,我发现对象的遍历主要分为两种情况,一种是在页面中遍历,另外一种是在方法中遍历对象,现在我们就从这两种情况分别来遍历对象获取对象的key和value。
定义一个变量
obj:object={a:1,b:2,c:3};//用于在页面中调用
在页面中使用v-for遍历出对象的key和value
<div>
<h1>
获取对象的key和value </h1>
<p v-for="(value,key) in obj" :key='key'>key:{{key}}-----value:{{value}}</p>
</div>
实现效果
定义个对象变量
objNum:object={1:'a',2:'b',3:'c'};
方法一:使用Object.keys()方法遍历对象的键和值
//实现思路:通过 Object.keys()对象方法将对象的key转化为一个数组,再通过forEach遍历出数组的值,再通过[key]去获取对象的value值。
Object.keys(this.objNum).forEach(key=>{
console.log('key:',key,'value:',this.objNum[key]);
}
方法一实现效果:
方法二:通过for in循环遍历对象的键和值
for(let key in this.objNum){
//for循环let key是对象里面的键,再通过,[]的形式this.objNum[item]去获取对象的value值
console.log('key',key);
console.log('value',this.objNum[key ]);
}
方法二实现效果:
以上就是vue遍历对象属性的方法有哪些的详细内容,更多请关注编程网其它相关文章!
--结束END--
本文标题: vue遍历对象属性的方法有哪些
本文链接: https://www.lsjlt.com/news/206276.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0