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){...}」。

#本教學操作環境：windows7系統、vue3版，DELL G3電腦。

最近透過物件相關知識的深入學習，我發現物件的遍歷主要分為兩種情況，一種是在頁面中遍歷，另外一種是在方法中遍歷對象，現在我們就從這兩種情況分別來遍歷物件取得物件的key和value。

情況一：在頁面中遍歷物件取得物件的鍵和值

定義一個變數

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

在頁面中使用v-for遍歷出物件的key和value

    <div>
      <h1>
        获取对象的key和value      </h1>
      <p>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遍歷物件屬性的方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！