Quelles sont les méthodes pour parcourir les propriétés des objets dans Vue ?

Les méthodes pour parcourir les propriétés d'un objet sont : 1. Utilisez l'instruction v-for pour parcourir la clé et la valeur de l'objet, avec la syntaxe "v-for="(val,key,i) in obj" "; 2. Utilisez Object.keys( ) pour parcourir les clés et les valeurs de l'objet, la syntaxe "Object.keys(ob).forEach(key=>{...}"; 3. Parcourez les clés et les valeurs de l'objet via la boucle "for...in", la syntaxe "for( let key in obj){...}".

L'environnement d'exploitation de ce tutoriel : système windows7 , version vue3, ordinateur DELL G3.

Récemment, grâce à une étude approfondie des connaissances liées aux objets, j'ai découvert que la traversée des objets est principalement Il y a deux situations, l'une traverse la page et l'autre traverse la objet dans la méthode. Nous allons maintenant parcourir l'objet pour obtenir la clé et la valeur de l'objet à partir de ces deux situations

Cas 1 : Parcourez l'objet dans la page pour obtenir la clé et la valeur de l'objet

Définir une variable

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

Utilisez v-for pour parcourir la clé et la valeur de l'objet dans la page

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

Obtenir l'effet

Scénario 2 : Parcourir l'objet dans la méthode pour obtenir les clés et valeurs de l'objet

Définir une variable objet

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

Méthode 1 : Utilisez la méthode Object.keys() pour parcourir les clés et valeurs de l'objet

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

Méthode 1 pour obtenir l'effet :

Méthode 2 : Parcourir les clés et les valeurs de l'objet à travers une boucle 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 ]);
    }

Méthode 2 pour obtenir l'effet :

[Recommandations associées : vuejs tutoriel vidéo, développement web front-end]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!