Renderizado Condicional ​

v-if ​

La directiva v-if se utiliza para renderizar condicionalmente un bloque. El bloque sólo se renderizará si la expresión de la directiva retorna un valor verdadero.

<h1 v-if="awesome" >¡Vue es increíble!</h1>

v-else ​

Puedes usar la directiva v-else para indicar un "bloque else" para v-if:

<button @click="awesome = !awesome" >Alternar</button>

<h1 v-if="awesome" >¡Vue es increíble!</h1>
<h1 v-else>Oh no 😢</h1>

Un elemento v-else debe seguir inmediatamente a un elemento v-if o a un elemento v-else-if; de lo contrario no será reconocido.

v-else-if ​

El elemento v-else-if, como su nombre indica, sirve como un "bloque else if" para v-if. También se puede encadenar múltiples veces:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  No A/B/C
</div>

Al igual que v-else, un elemento v-else-if debe seguir inmediatamente a un elemento v-if o v-else-if.

v-if en <template> ​

Como v-if es una directiva, tiene que estar unida a un solo elemento. Pero, ¿qué pasa si queremos alternar más de un elemento? En este caso podemos usar v-if en un elemento <template>, que sirva de envoltura invisible. El resultado final del renderizado no incluirá el elemento <template>.

<template v-if="ok">
  <h1>Título</h1>
  <p>Párrafo 1</p>
  <p>Párrafo 2</p>
</template>

v-else y v-else-if también pueden ser usados en la <template>.

v-show ​

Otra opción para mostrar condicionalmente un elemento es la directiva v-show. El uso es prácticamente el mismo:

<h1 v-show="ok">¡Hola!</h1>

La diferencia es que un elemento con v-show siempre se renderizará y permanecerá en el DOM; v-show sólo conmuta la propiedad CSS display del elemento.

v-show no soporta el elemento <template>, ni funciona con v-else.

v-if vs. v-show ​

v-if es una renderización condicional "real" porque asegura que los escuchadores de eventos y los componentes hijos dentro del bloque condicional sean destruidos y se vuelvan a crear correctamente durante los toggles.

v-if también es perezoso: si la condición es falsa en el renderizado inicial, no hará nada; el bloque condicional no se renderizará hasta que la condición se convierta en verdadera por primera vez.

En comparación, v-show es mucho más simple: el elemento siempre es renderizado sin considerar la condición inicial, con una alternancia basada en CSS.

En general, v-if tiene mayores costes de conmutación mientras que v-show tiene mayores costes de renderizado inicial. Así que prefiera v-show si necesita alternar algo muy a menudo, y prefiera v-if si es poco probable que la condición cambie en tiempo de ejecución.

v-if con v-for ​

Cuando se utilizan v-if y v-for en el mismo elemento, se evaluará primero v-if. Para más detalles, consulta la guía de renderizado de listas.