Hoy vamos a aprender a recorrer y mostrar un array en VueJS 2 usando la directiva de iteración v-for.
Es muy simple, veamos un ejemplo en una estructura básica de html:
<html>
<head>
<meta charset="utf-8">
<title>Curso de VueJS 2 - victorroblesweb.es</title>
</head>
<body>
<!-- Elemento main donde actua la instancia vue -->
<main>
<!-- Directiva de bucles v-for -->
<h1>Listado de peliculas (array)</h1>
<ol>
<li v-for="pelicula in peliculas">{{ pelicula }}</li>
</ol>
</main>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Y en nuestro fichero main.js tenemos la instancia de Vue principal donde tenemos nuestros datos.
new Vue({
el: 'main',
data: {
peliculas:['Batman v Superman', 'La verdad duele', 'Spiderman 3'],
}
});
Si analizamos el trozo de código de la plantilla donde se muestra el listado:
<!-- Directiva de bucles v-for -->
<h1>Listado de peliculas (array)</h1>
<ol>
<li v-for="pelicula in peliculas">{{ pelicula }}</li>
</ol>
Estamos haciendo un bucle foreach clásico.
Con esto ya sabemos recorrer y mostrar un array en VueJS 2.
¿Quieres más? Curso de VueJS 2 en Español – Crea webapps modernas
