What are the methods for traversing object properties in Vue?

Methods to traverse object attributes are: 1. Use the v-for instruction to traverse the key and value of the object, with the syntax "v-for="(val,key,i) in obj""; 2. Use Object.keys() traverses the keys and values ​​of the object, the syntax is "Object.keys(ob).forEach(key=>{...}"; 3. Traverse the keys and values ​​of the object through the "for...in" loop, Syntax "for(let key in obj){...}".

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Recently through in-depth study of object-related knowledge, I found that object traversal is mainly divided into two situations, one is traversing in the page, and the other is traversing the object in the method. Now we will start from these two situations. In each case, traverse the object to obtain the key and value of the object respectively.

Case 1: Traverse the object in the page to obtain the key and value of the object

Define a Variable

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

Use v-for in the page to traverse the key and value of the object

    <div>
      <h1>
        获取对象的key和value      </h1>
      <p>key:{{key}}-----value:{{value}}</p>
    </div>

To achieve the effect

Case 2: Traverse the object in the method to obtain the key and value of the object

Define an object variable

objNum:object={1:'a',2:'b',3:'c'};

Method 1: Use the Object.keys() method to traverse the keys and values ​​​​of the object

//实现思路：通过 Object.keys()对象方法将对象的key转化为一个数组，再通过forEach遍历出数组的值，再通过[key]去获取对象的value值。
    Object.keys(this.objNum).forEach(key=>{
      console.log('key:',key,'value:',this.objNum[key]);
  }

Method 1 achieves the effect:

Method Two: Traverse the keys and values ​​of the object through a for in loop

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

Method Two to achieve the effect:

[Related recommendations: vuejs video tutorial、web front-end development】

The above is the detailed content of What are the methods for traversing object properties in Vue?. For more information, please follow other related articles on the PHP Chinese website!