El renderizado condicional en Vue.js permite mostrar u ocultar elementos en el DOM basándose en condiciones específicas. Esto es fundamental para crear interfaces de usuario dinámicas y reactivas. En esta sección, aprenderemos cómo utilizar las directivas v-if, v-else-if, v-else y v-show para controlar el renderizado condicional en nuestras aplicaciones Vue.
Directiva v-if
La directiva v-if se utiliza para renderizar un bloque de contenido solo si la expresión asociada se evalúa como verdadera.
Ejemplo Básico
<div id="app">
<p v-if="isVisible">Este texto es visible</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
});
</script>En este ejemplo, el párrafo <p> se renderiza solo si isVisible es true.
Explicación
v-if="isVisible": La directivav-ifevalúa la expresiónisVisible. Si estrue, el contenido del elemento se renderiza; de lo contrario, no se renderiza.
Directiva v-else-if y v-else
Las directivas v-else-if y v-else se utilizan junto con v-if para manejar múltiples condiciones.
Ejemplo
<div id="app">
<p v-if="score >= 90">Excelente</p>
<p v-else-if="score >= 75">Bueno</p>
<p v-else-if="score >= 50">Regular</p>
<p v-else>Insuficiente</p>
</div>
<script>
new Vue({
el: '#app',
data: {
score: 85
}
});
</script>En este ejemplo, se muestra el mensaje correspondiente según el valor de score.
Explicación
v-else-if="score >= 75": Se evalúa siscorees mayor o igual a 75. Si estrue, se renderiza el contenido del elemento.v-else: Se renderiza si ninguna de las condiciones anteriores es verdadera.
Directiva v-show
La directiva v-show también se utiliza para mostrar u ocultar elementos, pero a diferencia de v-if, no elimina el elemento del DOM. En su lugar, utiliza la propiedad CSS display para controlar la visibilidad.
Ejemplo
<div id="app">
<p v-show="isVisible">Este texto es visible</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
});
</script>En este ejemplo, el párrafo <p> se muestra u oculta basándose en el valor de isVisible.
Explicación
v-show="isVisible": La directivav-showcontrola la visibilidad del elemento utilizando la propiedad CSSdisplay. SiisVisibleestrue, el elemento se muestra; de lo contrario, se oculta.
Comparación entre v-if y v-show
| Característica | v-if |
v-show |
|---|---|---|
| Renderizado | Añade o elimina el elemento del DOM | Controla la visibilidad mediante CSS |
| Coste de rendimiento | Mayor, debido a la manipulación del DOM | Menor, solo cambia la propiedad display |
| Uso recomendado | Cuando la condición cambia con poca frecuencia | Cuando la condición cambia con frecuencia |
Ejercicio Práctico
Ejercicio
Crea una aplicación Vue que muestre un mensaje de bienvenida solo si el usuario está autenticado. Si el usuario no está autenticado, muestra un mensaje de error.
Solución
<div id="app">
<p v-if="isAuthenticated">Bienvenido, usuario!</p>
<p v-else>Por favor, inicia sesión.</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isAuthenticated: false
}
});
</script>Explicación
v-if="isAuthenticated": Muestra el mensaje de bienvenida siisAuthenticatedestrue.v-else: Muestra el mensaje de error siisAuthenticatedesfalse.
Resumen
En esta sección, hemos aprendido cómo utilizar las directivas v-if, v-else-if, v-else y v-show para controlar el renderizado condicional en Vue.js. Estas herramientas son esenciales para crear interfaces de usuario dinámicas y reactivas. En el próximo tema, exploraremos el renderizado de listas en Vue.js.
Curso de Vue.js
Módulo 1: Introducción a Vue.js
- ¿Qué es Vue.js?
- Configuración del Entorno de Desarrollo
- Creando Tu Primera Aplicación Vue
- Entendiendo la Instancia de Vue
Módulo 2: Conceptos Básicos de Vue.js
- Sintaxis de Plantillas
- Vinculación de Datos
- Propiedades Computadas y Observadores
- Vinculación de Clases y Estilos
- Renderizado Condicional
- Renderizado de Listas
Módulo 3: Componentes de Vue.js
- Introducción a los Componentes
- Props y Eventos Personalizados
- Slots
- Componentes Dinámicos y Asíncronos
- Comunicación entre Componentes
Módulo 4: Vue Router
- Introducción a Vue Router
- Configuración de Vue Router
- Rutas Dinámicas
- Rutas Anidadas
- Guardias de Navegación
Módulo 5: Gestión de Estado con Vuex
- Introducción a Vuex
- Estado, Getters, Mutaciones y Acciones
- Módulos en Vuex
- Usando Vuex en Componentes
- Patrones Avanzados de Vuex
Módulo 6: Directivas de Vue.js
Módulo 7: Plugins de Vue.js
Módulo 8: Pruebas en Vue.js
- Pruebas Unitarias con Vue Test Utils
- Pruebas de Extremo a Extremo con Cypress
- Simulación de Dependencias
Módulo 9: Conceptos Avanzados de Vue.js
- Funciones de Renderizado y JSX
- Renderizado del Lado del Servidor (SSR) con Nuxt.js
- API de Composición de Vue 3
- Optimización del Rendimiento
Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js
- Construcción para Producción
- Despliegue de Aplicaciones Vue.js
- Integración y Despliegue Continuos (CI/CD)