El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Contenido del curso

El renderizado de listas es una característica fundamental en Vue.js que permite iterar sobre una colección de datos y generar elementos de manera dinámica en el DOM. En esta lección, aprenderás cómo utilizar la directiva v-for para renderizar listas de datos y cómo manejar listas de objetos.

Conceptos Clave

Directiva v-for: Se utiliza para iterar sobre una colección de datos.
Índice de Iteración: Acceso al índice del elemento actual en la iteración.
Claves (key): Uso de claves únicas para mejorar el rendimiento del renderizado.

Uso Básico de `v-for`

La directiva v-for se utiliza para iterar sobre una lista de datos y renderizar un elemento del DOM para cada ítem en la lista.

Ejemplo Básico

<div id="app">
  <ul>
    <li v-for="item in items" :key="item">{{ item }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: ['Manzana', 'Banana', 'Cereza']
    }
  });
</script>

En este ejemplo:

v-for="item in items": Itera sobre cada elemento en la lista items.
:key="item": Asigna una clave única a cada elemento para mejorar el rendimiento del renderizado.

Explicación del Código

HTML:
- <ul>: Define una lista desordenada.
- <li v-for="item in items" :key="item">{{ item }}</li>: Crea un elemento de lista para cada ítem en items.
JavaScript:
- new Vue({ ... }): Crea una nueva instancia de Vue.
- data: { items: ['Manzana', 'Banana', 'Cereza'] }: Define una lista de frutas en el estado de la instancia de Vue.

Uso del Índice de Iteración

Puedes acceder al índice del elemento actual en la iteración utilizando una sintaxis especial.

Ejemplo con Índice

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ index }} - {{ item }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: ['Manzana', 'Banana', 'Cereza']
    }
  });
</script>

En este ejemplo:

v-for="(item, index) in items": Itera sobre cada elemento en la lista items y proporciona el índice de cada elemento.

Renderizado de Listas de Objetos

Cuando trabajas con listas de objetos, es importante utilizar claves únicas para cada objeto.

Ejemplo con Objetos

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }} - {{ item.price }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { id: 1, name: 'Manzana', price: '$1' },
        { id: 2, name: 'Banana', price: '$0.5' },
        { id: 3, name: 'Cereza', price: '$2' }
      ]
    }
  });
</script>

En este ejemplo:

:key="item.id": Utiliza el id único de cada objeto como clave.

Ejercicio Práctico

Ejercicio

Crea una aplicación Vue que renderice una lista de tareas. Cada tarea debe tener un nombre y un estado (completada o no completada).

Define una lista de tareas en el estado de la instancia de Vue.
Utiliza v-for para renderizar cada tarea en una lista desordenada.
Muestra el nombre de la tarea y su estado (completada o no completada).

Solución

<div id="app">
  <ul>
    <li v-for="task in tasks" :key="task.id">
      {{ task.name }} - {{ task.completed ? 'Completada' : 'No Completada' }}
    </li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      tasks: [
        { id: 1, name: 'Aprender Vue.js', completed: false },
        { id: 2, name: 'Hacer la compra', completed: true },
        { id: 3, name: 'Leer un libro', completed: false }
      ]
    }
  });
</script>

Explicación del Código

HTML:
- <ul>: Define una lista desordenada.
- <li v-for="task in tasks" :key="task.id">{{ task.name }} - {{ task.completed ? 'Completada' : 'No Completada' }}</li>: Crea un elemento de lista para cada tarea, mostrando su nombre y estado.
JavaScript:
- new Vue({ ... }): Crea una nueva instancia de Vue.
- data: { tasks: [...] }: Define una lista de tareas en el estado de la instancia de Vue.

Resumen

En esta lección, aprendiste cómo utilizar la directiva v-for para renderizar listas de datos en Vue.js. Vimos cómo iterar sobre listas simples y listas de objetos, y cómo utilizar claves únicas para mejorar el rendimiento del renderizado. También realizaste un ejercicio práctico para reforzar los conceptos aprendidos.

En la próxima lección, exploraremos cómo trabajar con componentes en Vue.js, lo que te permitirá crear aplicaciones más modulares y reutilizables.

Curso de Vue.js

Módulo 1: Introducción a Vue.js

Módulo 2: Conceptos Básicos de Vue.js

Módulo 3: Componentes de Vue.js

Módulo 4: Vue Router

Módulo 5: Gestión de Estado con Vuex

Módulo 6: Directivas de Vue.js

Módulo 7: Plugins de Vue.js

Módulo 8: Pruebas en Vue.js

Módulo 9: Conceptos Avanzados de Vue.js

Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js

Módulo 11: Proyectos Reales con Vue.js

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia