Vimos en el concepto anterior como podemos condicionar que aparezca o no un elemento HTML dependiendo del estado de una propiedad del modelo de datos. Ahora veremos como podemos mostrar datos almacenados en el modelo en un arreglo.
Para mostrar datos almacenados en un arreglo en el modelo debemos iterar la estructura de datos e imprimir uno a uno dichos elementos mediante la directiva v-for.
Definir en el modelo de datos un vector con nombres de lenguajes de programación. Mostrar dichos datos en una lista no ordenada de HTML.
<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="aplicacion">
<ul>
<li v-for="lenguaje in lenguajes">{{lenguaje}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
lenguajes: ['C', 'C++', 'C#', 'Java', 'Ruby', 'Kotlin']
}
})
</script>
</body>
</html>
La directiva v-for itera sobre la propiedad 'lenguajes' definida en el modelo de datos y almacena en cada vuelta un elemento del vector en la variable 'lenguaje', la misma se muestra mediante interpolación {{lenguaje}}:
<ul>
<li v-for="lenguaje in lenguajes">{{lenguaje}}</li>
</ul>
El vector está creado en el modelo definido en el objeto app de la clase Vue:
var app=new Vue({
el: '#aplicacion',
data:{
lenguajes: ['C', 'C++', 'C#', 'Java', 'Ruby', 'Kotlin']
}
})
Tengamos en cuenta que es un ejemplo ya que si siempre tenemos que mostrar dichos lenguajes en la lista HTML sería mejor generar HTML puro:
<ul> <li>C</li> <li>C++</li> <li>C#</li> <li>Java</li> <li>Ruby</li> <li>Kotlin</li> </ul>
Pero en muchas situaciones dicho vector podría llegar de una petición AJAX por ejemplo, o de eventos del operador sobre la página.