Comment parcourir des objets avec v-for dans vue

La directive v-for pour parcourir les objets dans Vue est implémentée via la syntaxe v-for="item in object". Il permet de parcourir les propriétés de l'objet et de restituer le contenu du modèle. L'utilisation spécifique est la suivante : spécifiez l'élément de nom de variable traversé dans v-for, qui représente chaque valeur de l'objet. Accédez aux propriétés d'un objet en utilisant person[item], où item est le nom de la propriété. La directive v-for parcourt uniquement les propriétés énumérables d'un objet, pas les propriétés énumérables.

v-for pour parcourir des objets dans Vue

Dans Vue, vous pouvez parcourir des objets et restituer le contenu du modèle via la directive v-for.

Syntaxe

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

Exemple

Supposons qu'il y ait un objet 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
Pour parcourir l'objet person et restituer les propriétés name et age , vous pouvez utiliser le modèle suivant :
• rrreee
Résultat du rendu :

rrreee🎜🎜Notez que le item dans la directive 🎜🎜

🎜v-for peut être n'importe quel nom de variable, qui représentera chaque valeur de l'objet. 🎜🎜Pour accéder aux propriétés d'un objet, vous pouvez utiliser person[item], où item est le nom de la propriété. 🎜🎜La directive v-for ne peut parcourir que les propriétés énumérables de l'objet, mais pas les propriétés non énumérables. 🎜🎜

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!