Directivas de Renderizado Condicional en HTML con Vue.js

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:02

Directivas de Renderizado Condicional en HTML con Vue.js

Curso Básico de Vue.js 2

Clase 7 de 38

Clase 7 / 38

Recursos

¿Cómo renderizar contenido condicional en HTML con directivas?

Las directivas en frameworks como Vue.js nos facilitan la tarea de manejar la visibilidad de elementos HTML de manera inteligente y condicional. Este enfoque no solo ayuda a mantener limpio nuestro Document Object Model (DOM), sino que también optimiza la eficiencia de las aplicaciones web al mostrar u ocultar elementos en base a condiciones lógicas.

¿Cómo definir y usar la propiedad de variación?

Primero, necesitamos definir una propiedad que indique una condición que evaluaremos para mostrar ciertos elementos. En este caso, se utiliza this.percentageChange para representar un cambio porcentual en el precio de un producto. Esta puede ser:

Un número entero positivo
Cero
Un número entero negativo

Primero, definimos la propiedad en JavaScript como un número positivo. Este es un ejemplo de cómo se puede ver el código:

data() {
  return {
    percentageChange: 10
  }
}

¿Cómo usar la directiva v-if para mostrar elementos condicionalmente?

Ya que tenemos percentageChange definido, nos dirigimos al archivo HTML y creamos un elemento <span>. Utilizamos la directiva v-if para decidir cuándo mostrar este elemento. Por ejemplo:

<h1>
  <!-- Mostramos un emoji cuando percentageChange es mayor a cero -->
  <span v-if="percentageChange > 0">
    👍
  </span>
</h1>

Con este fragmento de código, el <span> solo se mostrará si percentageChange es mayor a cero. Esto resulta útil para indicar visualmente incrementos en el porcentaje.

¿Cómo manejar estados negativos o cero con v-else?

Para gestionar condiciones donde percentageChange es negativo o cero, usamos las directivas v-else-if. A continuación tenemos un ejemplo donde mostramos distintos emojis según el valor de percentageChange:

<h1>
  <span v-if="percentageChange > 0">
    👍
  </span>
  <span v-else-if="percentageChange < 0">
    👎
  </span>
  <span v-else>
    ⚖️
  </span>
</h1>

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

Las directivas v-if y v-show permiten controlar la visibilidad de elementos, pero funcionan de manera diferente:

v-if: Este elimina o agrega el elemento al DOM basado en la condición dada. Solo se renderiza cuando se cumple la condición, lo cual es eficiente para condiciones que no cambian frecuentemente.
v-show: No elimina el elemento del DOM, sino que simplemente cambia la propiedad CSS display a "none". Es ideal para elementos cuya visibilidad cambia con frecuencia.

Aquí tenemos un ejemplo de cómo usar v-show en lugar de v-if:

<h1>
  <span v-show="percentageChange > 0">
    👍
  </span>
  <span v-show="percentageChange < 0">
    👎
  </span>
  <span v-show="percentageChange === 0">
    ⚖️
  </span>
</h1>

¿Cuál deberías usar y cuándo?

La elección entre v-if y v-show depende de la frecuencia de cambio de la condición:

Usa v-if si los cambios en la visibilidad no ocurren con frecuencia.
Opta por v-show si la visibilidad necesita cambiar con frecuencia, para evitar mutaciones extendidas en el DOM.

Utilizar estas directivas eficientemente puede mejorar significativamente el rendimiento de tus aplicaciones, asegurando que se comporten de manera dinámica pero óptima. Recuerda siempre evaluar qué opción es la más adecuada según cada caso específico. Además, anima a tus usuarios a interactuar con un frontend más efectivo y receptivo.