全球速看:vue遍历对象属性的方法有哪些

时间:2022-12-28 18:04:52       来源:PHP中文网

本教程操作环境:windows7系统、vue3版,DELL G3电脑。


(相关资料图)

最近通过对象相关知识的深入学习,我发现对象的遍历主要分为两种情况,一种是在页面中遍历,另外一种是在方法中遍历对象,现在我们就从这两种情况分别来遍历对象获取对象的key和value。

情况一:在页面中遍历对象获取对象的键和值

定义一个变量

obj:object={a:1,b:2,c:3};//用于在页面中调用
登录后复制

在页面中使用v-for遍历出对象的key和value

获取对象的key和value

key:{{key}}-----value:{{value}}

登录后复制

实现效果

情况二:在方法中遍历对象获取对象的键和值

定义个对象变量

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 ]);    }
登录后复制

方法二实现效果:

【相关推荐:vuejs视频教程、web前端开发】

以上就是vue遍历对象属性的方法有哪些的详细内容,更多请关注php中文网其它相关文章!

关键词: 相关文章 对象方法 视频教程