Directive v-for de Vue3
Vue3 Directives intégréesv-forLa directive est utilisée pour afficher plusieurs fois des éléments en fonction des données source, et est la directive essentielle pour implémenter le rendu de liste dans Vue.
Description de base
v-forLa directive affiche à plusieurs reprises des éléments en fonction d'un tableau ou d'un objet. Elle vous permet d'afficher de façon répétée un groupe d'éléments similaires et d'utiliser les valeurs de la source de données.
- Type attendu: Array | Object | number | string | Iterable
- Fonction: Rendu de liste, affiche plusieurs fois des éléments en fonction des données source.
Syntaxe de base
Exemple
<!-- Itération de tableau -->
<li v-for="item in items">{{ item }}</li>
<!-- Itération avec index -->
<li v-for="(item, index) in items">{{ index }} - {{ item }}</li>
<!-- Itération d'objet -->
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
<!-- Itération numérique -->
<li v-for="n in 5">{{ n }}</li>
<li v-for="item in items">{{ item }}</li>
<!-- Itération avec index -->
<li v-for="(item, index) in items">{{ index }} - {{ item }}</li>
<!-- Itération d'objet -->
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
<!-- Itération numérique -->
<li v-for="n in 5">{{ n }}</li>
Scénarios d'utilisation
1. Itération de tableau
Exemple
<template>
<ul>
<li v-for="(fruit, index) in fruits" :key="index">
{{ index + 1 }}. {{ fruit }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
fruits: ['apple', 'banana', 'orange', 'grape']
}
}
}
</script>
<ul>
<li v-for="(fruit, index) in fruits" :key="index">
{{ index + 1 }}. {{ fruit }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
fruits: ['apple', 'banana', 'orange', 'grape']
}
}
}
</script>
2. Itération de tableau d'objets
Exemple
<template>
<table>
<tr v-for="person in people" :key="person.id">
<td>{{ person.id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
people: [
{ id: 1, name: 'Zhang San', age: 25 },
{ id: 2, name: 'Li Si', age: 30 }
]
}
}
}
</script>
<table>
<tr v-for="person in people" :key="person.id">
<td>{{ person.id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
people: [
{ id: 1, name: 'Zhang San', age: 25 },
{ id: 2, name: 'Li Si', age: 30 }
]
}
}
}
</script>
L'importance de key
Dans v-for, il est fortement recommandé de fournir un attribut key unique pour chaque élément de boucle, ce qui aide Vue à mettre à jour la liste efficacement.
Exemple
<!-- Utiliser id comme key (recommandé) -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
Autres extensions