Render condicional en Vue.js

En Vue.js la renderización condicional nos permite mostrar u ocultar elementos en función de una condición que van a ocurrir en nuestro código de JavaScript.

Por ejemplo, puedes hacer que un mensaje aparezca solo si el usuario ha iniciado sesión o que un botón solo se muestre si hay elementos en el carrito de compras.

Vue.js evalúa la condición y decide automáticamente si debe mostrar o esconder el elemento.

En Vue tenemos dos formas de hacer un render condicional v-if y v-show. Vamos a ver cada uno de ellas 👇.

Directiva v-if

La forma más habitual para mostrar o ocultar un elemento condicionalmente es la directiva v-if que nos permite renderizar un elemento en función de una expresión booleana.

• Si la expresión es verdadera, el elemento se renderizará
• Si es falsa, el elemento no se renderizará

Por ejemplo,

<div v-if="mostrarMensaje">
  <p>Este mensaje se mostrará si mostrarMensaje es verdadero</p>
</div>

Vamos a verlo con un ejemplo completo

<template>
  <div>
    <p v-if="mostrarMensaje">¡Hola, LuisLlamas.es!</p>
    <button @click="toggleMensaje">Toggle Mensaje</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const mostrarMensaje = ref(true);

function toggleMensaje() {
  mostrarMensaje.value = !mostrarMensaje.value;
}
</script>

Directivas v-else y v-else-if

Además, también podemos utilizar la directiva v-else para mostrar un elemento alternativo en caso de que la expresión sea falsa.

<div v-if="mostrarMensaje">
  <p>Este mensaje se mostrará si mostrarMensaje es verdadero</p>
</div>
<div v-else>
  <p>Este mensaje se mostrará si mostrarMensaje es falso</p>
</div>

Incluso tenemos una directiva v-else-if si necesitamos manejar varias condiciones. Vamos a verlo con un ejemplo

<template>
  <div>
    <p v-if="puntaje >= 90">Excelente</p>
    <p v-else-if="puntaje >= 70">Bueno</p>
    <p v-else-if="puntaje >= 50">Aprobado</p>
    <p v-else>Suspendido</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const puntaje = ref(85);
</script>

Renderizado condicional con v-show

La directiva v-show es similar a v-if, pero en lugar de ocultar el elemento del DOM, simplemente cambia su propiedad CSS display a none para ocultarlo visualmente.

Esto significa que el elemento sigue existiendo en el DOM, pero no se muestra en pantalla. Por lo demás, el uso es básicamente idéntico.

<div v-show="mostrarMensaje">
  <p>Este mensaje se mostrará si mostrarMensaje es verdadero</p>
</div>

Comparación entre v-if y v-show

En principio v-show y v-if pueden parecer muy similares, pero tienen usos distintos. La diferencia es cómo gestionan la visibilidad de los elementos.

• v-show es más eficiente cuando se requiere alternar la visibilidad de un elemento frecuentemente, ya que solo cambia su propiedad CSS display (sin necesidad de añadir o eliminar el elemento del DOM)

• v-if, por otro lado, es más adecuado cuando el elemento se necesita mostrar u ocultar solo bajo ciertas condicione.