Vue在页面和方法中分别通过遍历对象获取对象的键（key）和值（value）

爱被打了一巴掌 2022-08-31 02:28 15阅读 0赞

最近通过对象相关知识的深入学习，我发现对象的遍历主要分为两种情况，一种是在页面中遍历，另外一种是在方法中遍历对象，现在我们就从这两种情况分别来遍历对象获取对象的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>

**实现效果**  
![在这里插入图片描述][7adc8331b170d00e1bc4b6db5d49d64f.png_pic_center]

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

**定义个对象变量**

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]);
      }

**方法一实现效果：**  
![在这里插入图片描述][883ca9b1d7bc7de645a0c402fc3dd8da.png]

**方法二：通过for循环遍历对象的键和值**

for(let key in this.objNum){ 
        //for循环let key是对象里面的键，再通过,[]的形式this.objNum[item]去获取对象的value值
          console.log('key',key);
          console.log('value',this.objNum[key ]);
        }

**方法二实现效果:**  
![在这里插入图片描述][f6870406d17597e09545b6179f0431a0.png]

[7adc8331b170d00e1bc4b6db5d49d64f.png_pic_center]: /images/20220829/b319b77d272140ebad986f87aaed9031.png
[883ca9b1d7bc7de645a0c402fc3dd8da.png]: /images/20220829/6c6ec679f75e42e08a569ec0ab9d6abd.png
[f6870406d17597e09545b6179f0431a0.png]: /images/20220829/2686b157597c46959b72fe992beb0c6c.png