Vue - V-For
Se usa la directiva v-for
para recorrer todos los elementos dentro de la variable personas
<div id="app1">
<ul>
<li v-for="persona in personas">
{{ persona }}
</li>
</ul>
</div>
var app1 = new Vue({
el: '#app1',
data: {
personas: ['Uno', 'Dos', 'tres', 'cuatro'],
}
});
Resultado:
Accediendo a los datos de 3 diferentes objetos
<div id="app2">
<ul>
<li v-for="alumno in alumnos">
{{ alumno.nombre }} - {{ alumno.edad }}
</li>
</ul>
</div>
var app2 = new Vue({
el: '#app2',
data: {
alumnos: [
{ nombre: 'nombreUno', edad: 8 },
{ nombre: 'nombreDos', edad: 6 },
{ nombre: 'nombreTres', edad: 3 },
]
}
});
Resultado:
Mostrar el index
de cada uno de los objetos
<div id="app3">
<ul>
<li v-for="(alumno, identificacion) in alumnos">
{{ identificacion }} - {{ alumno.nombre }} - {{ alumno.edad }}
</li>
</ul>
</div>
var app3 = new Vue({
el: '#app3',
data: {
alumnos: [
{ nombre: 'nombreUno', edad: 8 },
{ nombre: 'nombreDos', edad: 6 },
{ nombre: 'nombreTres', edad: 3 },
]
}
});
Resultado:
Cuando se usa v-for
sobre algún elemento HTML, este copia tal cual el elemento HTML la cantidad de veces que se repite el ciclo.
Ejemplo: En los ejemplos anteriores se aplica la directiva v-for
en elemetos li
los cuales se repiten en cada ciclo, para evitar que elemetos HTML se repitan se pueden usar las etiquetas template
<div id="app4">
<template v-for="alumno in alumnos">
<h4>{{ alumno.nombre }}</h4>
<h6>{{ alumno.edad }}</h6>
</template>
</div>
var app4 = new Vue({
el: '#app4',
data: {
alumnos: [
{ nombre: 'nombreUno', edad: 8 },
{ nombre: 'nombreDos', edad: 6 },
{ nombre: 'nombreTres', edad: 3 },
]
}
});
Resultado:
Para recorrer todos los elementos dentro de los objetos de usan for
anidados
<div id="app5">
<template v-for="alumno in alumnos">
<div v-for="(valor, llave) in alumno">
<p>{{ llave }} - {{ valor }}</p>
</div>
</template>
</div>
var app5 = new Vue({
el: '#app5',
data: {
alumnos: [
{ nombre: 'nombreUno', edad: 8 },
{ nombre: 'nombreDos', edad: 6 },
{ nombre: 'nombreTres', edad: 3 },
]
}
});
Resultado: