Welche Methoden gibt es zum Durchlaufen von Objekteigenschaften in Vue?

Die Methoden zum Durchlaufen der Eigenschaften eines Objekts sind: 1. Verwenden Sie die v-for-Anweisung, um den Schlüssel und den Wert des Objekts mit der Syntax „v-for="(val,key,i) in obj" zu durchqueren. "; 2. Verwenden Sie Object.keys( ), um die Schlüssel und Werte des Objekts zu durchlaufen, die Syntax "Object.keys(ob).forEach(key=>{...}"; 3. Durchlaufen Sie die Schlüssel und Werte des Objekts durch die „for...in“-Schleife, die Syntax „for( let key in obj){...}“.

Die Betriebsumgebung dieses Tutorials: Windows7-System , vue3-Version, DELL G3-Computer.

Kürzlich habe ich durch eingehende Untersuchung des objektbezogenen Wissens herausgefunden, dass das Durchlaufen von Objekten hauptsächlich erfolgt. Es gibt zwei Situationen: Eine durchläuft die Seite und die andere durchquert die Seite Objekt in der Methode. Jetzt werden wir das Objekt durchlaufen, um den Schlüssel und den Wert des Objekts aus diesen beiden Situationen zu erhalten Definieren Sie eine Variable.

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

Verwenden Sie v-for, um den Schlüssel und den Wert des Objekts auf der Seite zu durchlaufen.

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

Erzielen Sie den Effekt die Schlüssel und Werte des Objekts

Definieren Sie eine Objektvariable

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

Methode 1: Verwenden Sie die Methode Object.keys(), um die Schlüssel und Werte des Objekts zu durchlaufen

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

Methode 1 zu Erzielen Sie den Effekt:

Methode 2: Durchlaufen Sie die Schlüssel und Werte des Objekts durch eine For-In-Schleife

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

Methode 2, um den Effekt zu erzielen:

[Verwandte Empfehlungen:

vuejs Video-Tutorial

, Web-Frontend-Entwicklung

]

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es zum Durchlaufen von Objekteigenschaften in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!