So durchlaufen Sie Objekte mit v-for in Vue

Die v-for-Direktive zum Durchlaufen von Objekten in Vue wird durch die v-for="item in object"-Syntax implementiert. Es ermöglicht das Durchlaufen von Objekteigenschaften und das Rendern von Vorlageninhalten. Die spezifische Verwendung ist wie folgt: Geben Sie das durchquerte Variablennamenelement in v-for an, das jeden Wert im Objekt darstellt. Greifen Sie mit person[item] auf die Eigenschaften eines Objekts zu, wobei item der Eigenschaftsname ist. Die v-for-Direktive durchläuft nur die aufzählbaren Eigenschaften eines Objekts, nicht die aufzählbaren Eigenschaften.

v-for zum Durchlaufen von Objekten in Vue

In Vue können Sie Objekte durchqueren und Vorlageninhalte über die v-for-Direktive rendern.

Syntax

<code class="html"><template v-for="item in object">
  <!-- 模板内容 -->
</template></code>

Beispiel

Angenommen, es gibt ein Objekt person: person：

<code class="javascript">const person = {
  name: 'John',
  age: 30
};</code>

要遍历 person 对象并渲染 name 和 age 属性，可以使用以下模板：

<code class="html"><template v-for="item in person">
  <p>属性名：{{ item }}</p>
  <p>属性值：{{ person[item] }}</p>
</template></code>

渲染结果：

<code class="html"><p>属性名：name</p>
<p>属性值：John</p>
<p>属性名：age</p>
<p>属性值：30</p></code>

注意

• v-for 指令中的 item 可以是任意变量名，它将表示对象中的每个值。
• 要访问对象的属性，可以使用 person[item]，其中 itemrrreee
Um über das person-Objekt zu iterieren und die Namens- und Alterseigenschaften darzustellen , können Sie die folgende Vorlage verwenden:
• rrreee
Rendering-Ergebnis:

rrreee🎜🎜Beachten Sie, dass das item in der 🎜🎜

🎜v-for-Direktive ein beliebiger Variablenname sein kann, der dargestellt wird Jeder Wert im Objekt. 🎜🎜Um auf die Eigenschaften eines Objekts zuzugreifen, können Sie person[item] verwenden, wobei item der Eigenschaftsname ist. 🎜🎜Die v-for-Direktive kann nur die aufzählbaren Eigenschaften des Objekts durchlaufen, nicht jedoch die nicht aufzählbaren Eigenschaften. 🎜🎜

Das obige ist der detaillierte Inhalt vonSo durchlaufen Sie Objekte mit v-for in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!