Diferencia entre v-show y v-if en el DOM

Las directivas son claves para controlar el flujo y la presentación en HTML sin complicar el código. Aquí verás cómo usar v-show, v-if, v-else, v-else-if y v-for, cómo se conectan con el ViewModel y qué diferencia real hay en el DOM al renderizar.

¿Qué son las directivas y cómo se relacionan con el ViewModel?

Las directivas son marcadores o atributos que se agregan a elementos HTML para aplicar transformaciones. Funcionan siempre que sus expresiones hagan referencia a valores del ViewModel: propiedades, métodos o valores computados. Si no existen, fallan.

• Se basan en valores existentes en propiedades, métodos o computed del ViewModel.
• No crean datos por sí mismas: dependen del estado ya definido.
• Permiten control de visibilidad, condición y repetición.

Ejemplo de propiedades en el ViewModel:

// propiedades del ViewModel
let showValue = true;
let value = 'algo';

¿Cuándo usar v-show o v-if para el DOM?

Elegir entre v-show y v-if impacta en cómo se manipula el DOM y el estilo.

¿Qué hace v-show con display none?

v-show muestra u oculta el elemento encendiendo o apagando la propiedad de CSS display, típicamente con display: none. El nodo sigue en el DOM.

<p v-show="showValue">{{ value }}</p>

• Si showValue es true: el elemento se ve.
• Si showValue es false: el elemento permanece en el DOM pero oculto por display: none.
• Útil cuando alternas visibilidad con frecuencia.

Tip de depuración: puedes abrir la console del navegador para ver mensajes y errores de linteo similares a la terminal, sin cambiar de ventana.

¿En qué casos conviene v-if, v-else y v-else-if?

v-if agrega o elimina el elemento del DOM según la condición. A diferencia de v-show, aquí el nodo no existe cuando la condición es falsa.

<p v-if="showValue">{{ value }}</p>
<p v-else-if="true">otro mensaje</p>
<p v-else>último mensaje</p>

• v-if: renderiza solo si la condición es verdadera.
• v-else-if: encadena condiciones adicionales.
• v-else: caso final cuando ninguna condición anterior se cumple.
• Útil cuando la condición cambia poco o el costo de creación del nodo importa.

Diferencia clave:

• v-show: oculta con CSS; el elemento sigue en el DOM.
• v-if: elimina del DOM cuando es falso.

¿Cómo iterar colecciones con v-for y plantillas?

Para representar colecciones en modo template, v-for recorre un array y renderiza un elemento por ítem.

// colección de ejemplo
const items = [1, 2, 3, 4, 5];

<ul>
  <li v-for="i in items">{{ i }}</li>
</ul>

• Un solo <li> en el código genera múltiples elementos renderizados.
• i representa cada elemento de items durante la iteración.
• Facilita listas dinámicas con sintaxis simple.

Palabras y conceptos clave explicados:

• Directiva: atributo que transforma elementos HTML según el estado del ViewModel.
• Expresión: fragmento evaluado dentro de una directiva o interpolación.
• ViewModel: fuente de datos donde viven propiedades, métodos y computed que usan las directivas.
• v-show: controla visibilidad vía display: none sin quitar del DOM.
• v-if / v-else-if / v-else: control condicional que agrega o quita nodos del DOM.
• v-for: iteración sobre colecciones para generar vistas repetidas.
• DOM: estructura del documento manipulada por el navegador.
• console del navegador: útil para ver el mismo output y errores de linteo que ofrece la terminal.
• data binding y manipulación de eventos: temas relacionados que amplían el uso de directivas para conectar datos y manejar interacciones.

¿Tienes dudas o un caso práctico que quieras revisar? Cuéntalo en los comentarios y construyamos juntos mejores ejemplos.