Renderizar contenido distinto según el estado de una variable es una de las tareas más frecuentes al construir interfaces. En Vue.js, las directivas condicionales v-if, v-else y v-else-if te permiten escribir esa lógica directamente en el template, sin recurrir a funciones computadas ni a JavaScript verboso. Es una forma declarativa, breve y reactiva de controlar qué ve tu usuario.

¿Qué son las directivas condicionales en Vue.js?

Las directivas condicionales son atributos especiales que empiezan con v- y replican la lógica de los condicionales de JavaScript dentro del template. La diferencia es que las escribes como parte del HTML y Vue se encarga de mostrar u ocultar elementos según el resultado.

¿Qué hace v-if en Vue.js? Evalúa una expresión y renderiza el elemento solo si el resultado es verdadero. Si es falso, el nodo no aparece en el DOM.

Cualquier expresión válida de JavaScript que devuelva true o false funciona dentro del valor de la directiva, lo que te da flexibilidad para combinar variables, negaciones u operadores.

¿Cómo reemplazar una propiedad computada por v-if y v-else?

En el ejemplo trabajado en clase [01:30], existía un label calculado mediante una computed property que dependía de la variable open para mostrar "Acceder" o "Salir" dentro de un botón. Esa misma lógica puede vivir directamente en el template.

La reescritura queda así, dentro del botón:

html <button @click="toggle">

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

Cuando open es falso, se muestra el div de acceder. Cuando es verdadero, Vue renderiza automáticamente el bloque del v-else. No necesitas escribir la condición dos veces ni mantener una propiedad computada solo para alternar texto.

¿Cuándo conviene una computed y cuándo un condicional en template?

Ambas opciones son válidas y tienen ventajas distintas:

• Usa computed cuando el valor derivado se reutiliza en varios lugares del template o requiere lógica más compleja.
• Usa v-if y v-else cuando se trata de mostrar u ocultar bloques de markup distintos según un estado.
• Combina ambas si necesitas claridad y separación entre datos y presentación.

La decisión depende de qué hace más legible tu componente.

¿Cómo mostrar contenido distinto según el estado de sesión?

La segunda parte del ejercicio [03:40] amplía la lógica para pedir un nombre de usuario cuando la sesión está cerrada y saludar al usuario cuando ya inició sesión. Se agregan dos bloques nuevos al template:

html

<div v-if="open">Hola, ¿cómo estás? {{ username }}</div> <div v-else> <input type="text" v-model="username" /> </div>

La variable username se declara dentro del objeto data con un string vacío como valor inicial, y se enlaza al input mediante v-model para mantener la sincronización entre vista y modelo.

¿Qué pasa si no declaro la variable en data? Vue no la reconocerá como reactiva y el template no se actualizará cuando cambie su valor. Toda variable usada en el template debe existir en el estado del componente.

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

Para que el nombre no quede guardado al salir, se ajusta el método que alterna la sesión [05:20]: cuando el usuario presiona "Salir", además de cambiar open, se reasigna username a un string vacío. Así, al volver a la pantalla de acceso, el input aparece limpio y listo para un nuevo ingreso.

El flujo completo queda fluido: escribes "Diana", pulsas acceder, ves el saludo personalizado, sales y el campo se reinicia.

¿Qué ventajas tiene el renderizado declarativo en Vue.js?

Escribir condicionales con directivas en lugar de manipular el DOM con JavaScript trae beneficios concretos:

• Menos código repetitivo y más legible dentro del template.
• Reactividad automática: Vue actualiza la vista cuando cambian las variables involucradas.
• Separación clara entre lógica de datos y presentación.
• Posibilidad de combinar v-if, v-else-if y v-else igual que en JavaScript puro.

La idea es aprovechar la sintaxis declarativa que ofrece el framework para que tu componente se lea casi como una descripción del comportamiento, no como una receta paso a paso.

¿Has refactorizado alguna computed property a un condicional en template? Cuéntame en los comentarios qué criterio usaste para decidir.