Tutorial VueJS 3 – Renderização condicional com v-if e v-show

Uma loja tem de dizer se o produto está disponível. O Vue tem duas ferramentas para mostrar ou esconder um elemento consoante uma condição: v-if e v-show. Parecem-se, mas não fazem a mesma coisa.

Preparar a condição

Acrescenta um stock ao estado do 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

O v-if coloca um elemento na página apenas se a expressão for verdadeira.

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

Para cobrir vários casos, encadeia com v-else-if e 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>

Só um destes três parágrafos existe de cada vez. Põe o inventory a 5 e depois a 0, e vê a mensagem mudar.

Condicionar vários elementos de uma vez

Para aplicar uma condição a um grupo sem acrescentar uma div inútil, põe o v-if num <template>. Esta tag não produz nada no HTML final.

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

v-show

O v-show responde à mesma necessidade, com uma mecânica diferente:

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

O elemento está sempre presente no DOM. Quando a condição é falsa, o Vue limita-se a aplicar-lhe display: none. Abre o inspetor para confirmar:

<!-- 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>

Qual escolher

A diferença está no custo da operação.

• v-if cria e destrói o elemento e, com ele, os componentes filhos e os respetivos estados. Custo elevado na troca, custo nulo quando a condição é falsa.
• v-show limita-se a mudar uma propriedade CSS. Custo elevado na primeira renderização, já que o elemento é sempre construído, custo quase nulo nas trocas seguintes.

Na prática: v-show para o que abre e fecha muitas vezes, como um menu ou um painel que se desdobra. v-if para todo o resto, sobretudo para o que é caro de construir ou não deve sequer existir em certos casos.

v-if e v-for no mesmo elemento

Não os combines na mesma tag. O ciclo v-for é o tema do capítulo seguinte. Desde o Vue 3, o v-if tem prioridade e é avaliado antes do ciclo: a variável do ciclo ainda não existe, o que provoca um erro. Põe o v-if num <template> interior, ou filtra a lista numa propriedade computada. Vamos ver as duas soluções no capítulo 7.