vue如何遍历对象属性

本文讲解"vue怎么遍历对象属性"，希望能够解决相关问题。

遍历对象属性的方法有：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){...}”。

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

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

定义一个变量

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

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

    <div>
      <h2>
        获取对象的key和value      </h2>
      <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怎么遍历对象属性" 就介绍到此。希望多多支持编程宝库。

本文讲解"vue事件总线取消了吗"，希望能够解决相关问题。vue3取消了全局事件总线，废除原因是安全性低。全局事件总线是一个全局任意组件通信技术，即任意组件间的通信均可实现。在vue3中，如果想要使用全局事件总线，需 ...