Recorrer y mostrar un array en VueJS 2

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.

Víctor Robles WEB

Autor: Victor

Desarrollador web - Formador online - Blogger

Compartir este post