El renderizado condicional en Vue te permite mostrar u ocultar bloques de código según condiciones específicas, algo fundamental en cualquier aplicación web. Si trabajas con Vue y quieres controlar qué ve el usuario y cuándo, aquí aprenderás a usar las directivas v-if, v-show y v-else-if con un ejemplo práctico: un juego de adivinar números.

Qué es el renderizado condicional en Vue

El renderizado condicional significa decidir, bajo ciertas condiciones, si mostramos o no una etiqueta en pantalla. En lugar de dejar todo visible siempre, le dices a Vue: "muestra esto solo si se cumple tal regla".

En el ejemplo del juego, la idea es poner un letrerito que diga si el número que buscas es mayor, menor, o si ya ganaste. Para lograrlo entran en juego las directivas de Vue.

¿Qué es el renderizado condicional en Vue? Es la capacidad de mostrar u ocultar elementos del HTML dependiendo de si una condición es verdadera o falsa, usando directivas como v-if y v-show.

Cómo funciona v-show para ocultar elementos

v-show es la primera directiva que aparece en el componente GameCounter, justo debajo del contador [01:12]. Si le pasas el valor true, muestra el componente; si le pasas false, no lo muestra.

Aquí viene lo interesante. Cuando inspeccionas el código, el elemento que usa v-show con valor falso sigue existiendo en el DOM, solo que tiene aplicado el estilo display: none. El elemento continúa activo, simplemente está oculto a la vista.

¿Qué hace v-show en Vue? Oculta un elemento aplicándole el estilo CSS display: none, pero el elemento permanece renderizado y activo dentro del DOM.

Cuál es la diferencia entre v-if y v-show

Aquí está la distinción clave. Mientras v-show solo esconde visualmente el elemento, v-if actúa de forma más radical.

Cuando usas v-if con valor false, el elemento ni siquiera es compilado ni mostrado en el DOM por Vue [02:30]. No existe, no está ahí. En cambio, con true, se renderiza normalmente.

Las diferencias principales entre ambas directivas son:

• v-show deja el elemento en el DOM y solo lo oculta con display: none.
• v-if elimina por completo el elemento del DOM cuando la condición es falsa.
• v-show conviene para accesibilidad cuando solo necesitas esconder algo.
• v-if conviene cuando, por lógica de negocio, necesitas borrar del todo un componente complejo.

La recomendación que se da en la clase es sencilla: si solo tienes que ocultar algo por cuestiones de accesibilidad, usa v-show. Pero si un componente es muy complejo y necesitas quitarlo completamente por lógica, usa v-if.

Cómo usar v-else-if para múltiples condiciones

Ahora toca aplicar la lógica del juego: decidir si el usuario debe buscar un número mayor, uno menor o si ya ganó. Y aquí aparece una directiva especial que funciona casi como un switch.

v-else-if permite que, si la primera condición no se cumple, pases a la siguiente evaluando otra condición. En el ejemplo [03:50]:

• Con v-if, si el contador es menor que numberToGuess, muestra "Buscar número mayor".
• Con v-else-if, si el contador es mayor que numberToGuess, muestra "Buscar número menor".
• Para el mensaje "Has ganado", se utiliza v-show que aparece justo cuando el jugador acierta.

Al recargar el juego y picar hacia arriba hasta llegar al número correcto, aparece el label "Has ganado". Lo mismo ocurre al buscar un número menor hasta dar con la respuesta.

Qué opciones tienes para combinar directivas

Dependiendo del caso de uso, puedes elegir entre varias combinaciones:

• Usar v-show solo para mostrar u ocultar.
• Usar v-if de forma independiente.
• Encadenar v-if con v-else-if para varias condiciones.
• Combinar v-if con un v-else para mostrar algo por defecto cuando la condición no se cumple.

La clave está en que numberToGuess representa el número a adivinar, y la comparación con el contador define qué mensaje se renderiza en cada momento.

Como reto, experimenta con lo aprendido e implementa tus propios casos de uso aplicando v-if, v-show y v-else-if. ¿Qué otro escenario se te ocurre donde el renderizado condicional sea útil? Cuéntalo en los comentarios.