Vue3 v-for Directiva
Directivas integradas de Vue3v-forEsta directiva se utiliza para renderizar elementos varias veces según los datos de origen, y es la directiva principal para implementar la renderización de listas en Vue.
Descripción básica
v-forLa directiva renderiza elementos repetidamente basándose en un array o un objeto. Te permite renderizar repetidamente un conjunto de elementos similares y utilizar los valores de la fuente de datos.
- Tipo esperado: Array | Object | number | string | Iterable
- Función: Renderizado de listas, renderiza elementos varias veces según los datos de origen.
Sintaxis básica
Ejemplo
<!-- Iteración de arrays -->
<li v-for="item in items">{{ item }}</li>
<!-- Iteración con índice -->
<li v-for="(item, index) in items">{{ index }} - {{ item }}</li>
<!-- Iteración de objetos -->
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
<!-- Iteración numérica -->
<li v-for="n in 5">{{ n }}</li>
<li v-for="item in items">{{ item }}</li>
<!-- Iteración con índice -->
<li v-for="(item, index) in items">{{ index }} - {{ item }}</li>
<!-- Iteración de objetos -->
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
<!-- Iteración numérica -->
<li v-for="n in 5">{{ n }}</li>
Casos de uso
1. Recorrido de arrays
Ejemplo
<template>
<ul>
<li v-for="(fruit, index) in fruits" :key="index">
{{ index + 1 }}. {{ fruit }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
fruits: ['Manzana', 'Plátano', 'Naranja', 'Uva']
}
}
}
</script>
<ul>
<li v-for="(fruit, index) in fruits" :key="index">
{{ index + 1 }}. {{ fruit }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
fruits: ['Manzana', 'Plátano', 'Naranja', 'Uva']
}
}
}
</script>
2. Iteración de arrays de objetos
Ejemplo
<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>
La importancia de key
En v-for, se recomienda encarecidamente proporcionar un atributo key único para cada elemento del bucle, lo que ayuda a Vue a actualizar la lista de manera eficiente.
Ejemplo
<!-- Usar id como key (recomendado) -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
Otras extensiones