Condicionales en Vue.js: Uso de Directivas para Templates Dinámicos

Controlar qué elementos se muestran en pantalla según el estado de tu aplicación es una necesidad constante en el desarrollo frontend. Vue.js simplifica esta tarea con directivas condicionales que permiten escribir lógica directamente en el template, sin recurrir a funciones adicionales en JavaScript. Así se logra un código más declarativo, breve y fácil de mantener.

¿Cómo funcionan v-if y v-else en Vue.js?

Las directivas condicionales de Vue.js siguen la misma lógica que los condicionales if, else y else if de JavaScript, pero se aplican como atributos dentro de las etiquetas HTML del template. La sintaxis siempre comienza con v- seguido del condicional correspondiente [01:58].

• v-if recibe cualquier expresión válida de JavaScript que retorne verdadero o falso.
• v-else se coloca en el elemento inmediatamente siguiente y actúa como la rama alternativa.
• No es necesario crear una propiedad computada solo para alternar textos sencillos.

Por ejemplo, para simular un sistema de inicio y cierre de sesión, se puede usar v-if="!open" en un elemento que muestre "Acceder" y v-else en otro que muestre "Salir" [02:22]:

html

<div v-if="!open">Acceder</div> <div v-else>Salir</div>

De esta manera, Vue.js se encarga de renderizar únicamente el elemento que cumple la condición, eliminando el otro del DOM por completo. Esto es diferente a simplemente ocultarlo con CSS: el nodo directamente no existe cuando la condición es falsa.

¿Cuándo usar directivas condicionales en lugar de propiedades computadas?

Ambas opciones son válidas. Una propiedad computada (computed property) resulta útil cuando la lógica involucra transformaciones de datos o se reutiliza en varios lugares. En cambio, las directivas condicionales en el template son ideales cuando solo necesitas alternar la visibilidad de bloques de HTML según una variable reactiva [01:30]. La ventaja principal es que el código queda más legible y cercano al lugar donde realmente se usa.

¿Cómo combinar v-if con v-model para una experiencia interactiva?

El ejemplo práctico de la clase lleva la funcionalidad un paso más allá: cuando el usuario no ha iniciado sesión, se muestra un campo de texto para capturar su nombre; cuando ya accedió, se despliega un saludo personalizado [03:15].

html

<div v-if="open"> <p>Hola, {{ username }}</p> </div> <div v-else> <input type="text" v-model="username" /> </div>

Aquí entra en juego v-model, la directiva de enlace bidireccional que sincroniza el valor del input con la variable username declarada en el objeto data [03:42]:

javascript data() { return { open: false, username: '' } }

¿Cómo limpiar el estado al cerrar sesión?

Para que la experiencia sea completa, al presionar "Salir" conviene reiniciar la variable username a una cadena vacía dentro del método correspondiente [04:32]. Así, la próxima vez que el usuario vea el formulario, el campo aparecerá limpio:

javascript methods: { toggle() { this.open = !this.open; if (!this.open) { this.username = ''; } } }

El flujo resultante es claro: el usuario escribe su nombre, presiona "Acceder", ve el mensaje "Hola, Diana" y, al presionar "Salir", todo vuelve a su estado inicial.

¿Por qué escribir código declarativo con directivas de Vue.js?

La gran ventaja de usar v-if, v-else y v-else-if es que el template se convierte en una descripción visual del comportamiento de la interfaz. No necesitas leer funciones separadas para entender qué se muestra y cuándo. Todo queda expresado junto al HTML, aprovechando la reactividad que Vue.js ofrece de forma nativa [05:00].

• El código es más corto y legible.
• Se reduce la cantidad de JavaScript manual.
• La lógica de presentación vive donde tiene sentido: en el template.

Si ya dominas el renderizado de datos y el manejo de eventos en Vue.js, incorporar directivas condicionales es el siguiente paso natural para construir interfaces dinámicas y limpias. ¿Has encontrado casos donde prefieras una propiedad computada sobre un v-if? Comparte tu experiencia en los comentarios.