Tutorial VueJS 3 – Renderizado condicional

Una tienda tiene que decir si el producto está disponible. Vue ofrece dos herramientas para mostrar u ocultar un elemento según una condición: v-if y v-show. Se parecen, pero no hacen lo mismo.

Preparar la condición

Añade un stock al estado del componente:

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

const product = ref('T-Shirt')
const image = ref('/images/t-shirt-bleu.svg')
const inventory = ref(100)
</script>

v-if, v-else-if, v-else

v-if coloca un elemento en la página solo si la expresión es verdadera.

<p v-if="inventory > 10">En stock</p>

Para cubrir varios casos, encadena con v-else-if y v-else:

<div class="product-info">
  <h1>{{ product }}</h1>

  <p v-if="inventory > 10">En stock</p>
  <p v-else-if="inventory > 0">Bientôt en rupture</p>
  <p v-else>En rupture</p>
</div>

Solo uno de esos tres párrafos existe a la vez. Pon inventory a 5, luego a 0, y mira cómo cambia el mensaje.

Condicionar varios elementos a la vez

Para aplicar una condición a un grupo sin añadir un div inútil, pon el v-if sobre <template>. Esa etiqueta no produce nada en el HTML final.

<template v-if="inventory > 0">
  <h2>Disponible</h2>
  <p>Expédié sous 48 heures.</p>
</template>

v-show

v-show responde a la misma necesidad, con una mecánica distinta:

<p v-show="inventory > 0">Livraison sous 48 h</p>

El elemento está siempre presente en el DOM. Cuando la condición es falsa, Vue se limita a aplicarle display: none. Abre el inspector para comprobarlo:

<!-- inventory vaut 0, avec v-if : l’élément a disparu -->
<!--v-if-->

<!-- inventory vaut 0, avec v-show : l’élément est là, masqué -->
<p style="display: none;">Livraison sous 48 h</p>

Cuál elegir

La diferencia está en el coste de la operación.

• v-if crea y destruye el elemento, y con él sus componentes hijos y sus estados. Coste alto en cada cambio, coste nulo mientras la condición es falsa.
• v-show se limita a cambiar una propiedad CSS. Coste alto en el primer renderizado, porque el elemento se construye siempre, y coste casi nulo en los cambios siguientes.

En la práctica: v-show para lo que se abre y se cierra a menudo, como un menú o un panel desplegable. v-if para todo lo demás, en especial para lo que cuesta caro construir o no debe existir en absoluto en ciertos casos.

v-if y v-for en el mismo elemento

No los combines en la misma etiqueta. El bucle v-for es el tema del capítulo siguiente. Desde Vue 3, v-if tiene prioridad y se evalúa antes que el bucle: la variable del bucle todavía no existe, lo que provoca un error. Pon el v-if sobre un <template> interior, o filtra la lista en una propiedad computada. Veremos las dos formas en el capítulo 7.