2023vue遍历对象属性的方法有哪些

 所属分类:web前端开发

 浏览:187次-  评论: 0次-  更新时间:2023-01-09
描述:更多教程资料进入php教程获得。 遍历对象属性的方法有:1、使用v-for指令遍历出对象的key和value,语法“v-for="(val,key,i) in obj"”;...
更多教程资料进入php教程获得。

遍历对象属性的方法有:1、使用v-for指令遍历出对象的key和value,语法“v-for="(val,key,i) in obj"”;2、用Object.keys()遍历对象的键和值,语法“Object.keys(ob).forEach(key=>{...}”;3、通过“for…in”循环遍历对象的键和值,语法“for(let key in obj){...}”。

本教程操作环境: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 ]);
    }
登录后复制

方法二实现效果:

在这里插入图片描述

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

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

 标签: vue,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!