Vue - V-For

Se usa la directiva v-for para recorrer todos los elementos dentro de la variable personas

1
2
3
4
5
6
7
<div id="app1">
  <ul>
    <li v-for="persona in personas">
      {{ persona }}
    </li>
  </ul>
</div>
1
2
3
4
5
6
var app1 = new Vue({
  el: '#app1',
  data: {
    personas: ['Uno', 'Dos', 'tres', 'cuatro'],
  }
});

Resultado:

Accediendo a los datos de 3 diferentes objetos

1
2
3
4
5
6
7
<div id="app2">
  <ul>
    <li v-for="alumno in alumnos">
      {{ alumno.nombre }} - {{ alumno.edad }}
    </li>
  </ul>
</div>
1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
5
6
7
<div id="app3">
  <ul>
    <li v-for="(alumno, identificacion) in alumnos">
      {{ identificacion }} - {{ alumno.nombre }} - {{ alumno.edad }}
    </li>
  </ul>
</div>
1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
5
6
<div id="app4">
  <template v-for="alumno in alumnos">
    <h4>{{ alumno.nombre }}</h4>
    <h6>{{ alumno.edad }}</h6>
  </template>
</div>
1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
5
6
7
<div id="app5">
  <template v-for="alumno in alumnos">
    <div v-for="(valor, llave) in alumno">
      <p>{{ llave }} - {{ valor }}</p>
    </div>
  </template>
</div>
1
2
3
4
5
6
7
8
9
10
var app5 = new Vue({
  el: '#app5',
  data: {
    alumnos: [
      { nombre: 'nombreUno', edad: 8 },
      { nombre: 'nombreDos', edad: 6 },
      { nombre: 'nombreTres', edad: 3 },
    ]
  }
});

Resultado: