0Pricing
Vue Academy · Lección

Condicionales y bucles

Renderice condicionalmente con v-if y listas con v-for

Condicionales y bucles es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.

Renderizado condicional

Vue le permite mostrar u ocultar partes de la interfaz según los datos.

  • v-if renderiza un elemento de forma condicional
  • v-else-if y v-else encadenan condiciones
  • v-show alterna la visibilidad

v-if

La directiva v-if renderiza un elemento únicamente cuando su expresión es verdadera.

<p v-if="isLoggedIn">Welcome back!</p>
<p v-if="cart.length === 0">Your cart is empty.</p>

v-else-if y v-else

Encadene condiciones con v-else-if y v-else. Deben aparecer directamente después de un v-if.

<p v-if="score >= 90">Grade: A</p>
<p v-else-if="score >= 80">Grade: B</p>
<p v-else-if="score >= 70">Grade: C</p>
<p v-else>Grade: F</p>

v-show

v-show siempre renderiza el elemento, pero alterna su propiedad CSS display.

<div v-show="isVisible">
  This div stays in the DOM,
  only display:none toggles.
</div>

v-if frente a v-show

La diferencia principal:

  • v-if añade o elimina completamente el elemento del DOM
  • v-show lo mantiene en el DOM y solo alterna display

Use v-show para los elementos cuya visibilidad se alterna con frecuencia. Use v-if cuando la condición cambie rara vez o el elemento sea costoso de renderizar.

v-for sobre matrices

La directiva v-for renderiza una lista iterando una matriz.

<ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul>

<!-- data: fruits = ["Apple", "Banana", "Cherry"] -->

v-for con índice

v-for también puede proporcionar el índice de cada elemento.

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

La importancia de :key

Proporcione siempre una :key única al usar v-for.

  • Ayuda a Vue a realizar el seguimiento de la identidad de cada nodo
  • Permite actualizar el DOM de forma eficiente y correcta
  • Use un id único y estable, no el índice de la matriz cuando los elementos cambien de orden
<li v-for="user in users" :key="user.id">
  {{ user.name }}
</li>

Por qué es importante :key

Sin una clave adecuada, Vue podría reutilizar los elementos equivocados cuando cambie la lista.

  • Los campos de formulario podrían conservar el valor equivocado
  • Las animaciones podrían fallar
  • El estado podría asociarse a la fila equivocada

Una clave estable y única evita estos errores.

v-for sobre objetos

v-for puede iterar los valores de las propiedades de un objeto, con una clave y un índice opcionales.

<li v-for="(value, key) in userProfile" :key="key">
  {{ key }}: {{ value }}
</li>

<!-- userProfile = { name: "Ada", age: 36 } -->

Combinar v-for y condiciones

Para filtrar una lista, prefiera una propiedad computada en lugar de colocar v-if en el mismo elemento que v-for.

<!-- Filter in a computed, then loop -->
<li v-for="task in activeTasks" :key="task.id">
  {{ task.title }}
</li>

<!-- activeTasks is a computed that
     returns only unfinished tasks -->

Comprobación rápida

Compruebe cuánto entiende sobre los condicionales y los bucles.

Resumen: condicionales y bucles

Ha aprendido sobre el renderizado condicional y de listas:

  • v-if / v-else-if / v-else renderizan de forma condicional
  • v-show solo alterna la visualización
  • v-for itera matrices y objetos
  • Añada siempre una :key única
  • Filtre las listas con propiedades computadas

A continuación: vinculación de atributos y clases.

Preguntas frecuentes

¿La lección «Condicionales y bucles» es gratis?

Sí — el texto completo de «Condicionales y bucles» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Condicionales y bucles»?

Renderice condicionalmente con v-if y listas con v-for Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.

¿Cuánto tiempo toma la lección «Condicionales y bucles»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Interpolación y directivas
  2. Condicionales y bucles
  3. Vinculación de atributos y clases
← Volver a Vue Academy