Heim >Web-Frontend >View.js >So durchlaufen Sie Objekte mit v-for in Vue

So durchlaufen Sie Objekte mit v-for in Vue

下次还敢
下次还敢Original
2024-05-07 11:33:161193Durchsuche

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.

So durchlaufen Sie Objekte mit v-for in Vue

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Die Rolle des Namens in VueNächster Artikel:Die Rolle des Namens in Vue