Comment utiliser vfor dans vue

La directive v-for dans Vue.js est utilisée pour parcourir un tableau ou un objet afin de restituer dynamiquement une liste d'éléments en fournissant un élément représentant l'élément actuel et un index facultatif représentant l'index actuel. Cette directive peut être utilisée pour parcourir des tableaux et des objets et spécifier des clés uniques à l'aide de l'attribut :key pour optimiser les performances.

Utilisation de v-for dans Vue.js

v-for est une instruction intégrée dans Vue.js pour parcourir des tableaux ou des objets. Il vous permet de restituer dynamiquement les éléments d'une liste tout en fournissant à chaque élément une clé unique.

Syntaxe

<code><template v-for="(item, index) in collection">
  <!-- 渲染项目 -->
</template></code>

Paramètres

<li> item: L'élément actuel dans la liste. <li> index : Index de l'élément actuel (facultatif). <li> collection : Le tableau ou l'objet à parcourir.

Usage

Itérer sur le tableau

<code><ul>
  <li v-for="item in names">{{ item }}</li>
</ul></code>

Cela créera un élément <li> pour chaque élément du tableau names et affichera la valeur de l'article. names 数组中的每个项目创建一个 <li> 元素，并显示项目值。

遍历对象

<code><ul>
  <li v-for="key in object">{{ key }}: {{ object[key] }}</li>
</ul></code>

这将为 object 对象中的每个键创建一个 <li> 元素，并显示键和值。

使用 index

v-for 指令还有一个可选的 index 参数，它提供当前项目的索引：

<code><ul>
  <li v-for="(item, index) in names">{{ index + 1 }}: {{ item }}</li>
</ul></code>

唯一键

每个 v-for 项目都必须具有一个唯一的键。这是因为 Vue.js 使用该键来跟踪项目的变化，并有效地更新 DOM。您可以使用 :key

Itérer sur les objets

🎜

<code><ul>
  <li v-for="item in names" :key="item">{{ item }}</li>
</ul></code>

🎜Cela créera un élément <li> pour chaque clé de l'objet object et affichera la clé et la valeur. 🎜🎜🎜Utiliser index🎜🎜🎜La directive v-for a également un paramètre facultatif index, qui fournit l'index du projet en cours : 🎜rrreee🎜🎜Clé unique🎜🎜🎜par projet v-for Tous doivent avoir une clé unique. En effet, Vue.js utilise cette clé pour suivre les modifications apportées à l'élément et mettre à jour efficacement le DOM. Vous pouvez spécifier une clé pour un projet en utilisant l'attribut :key : 🎜rrreee🎜Si vous ne fournissez pas de clé, Vue.js utilisera le projet actuel comme clé par défaut. Toutefois, l’utilisation de clés explicites peut améliorer les performances. 🎜

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!