Renderizado Condicional ​

v-if ​

La directiva v-if se utiliza para renderizar un bloque condicionalmente. El bloque solo se renderizará si la expresión de la directiva devuelve un valor verdadero (truthy).

<h1 v-if="awesome">¡Vue es fabuloso!</h1>

v-else ​

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

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

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

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

v-else-if ​

v-else-if, como su nombre indica, sirve como un "bloque else if" para v-if. También se puede encadenar varias 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>

Similar a v-else, un elemento v-else-if debe seguir inmediatamente a un elemento v-if o v-else-if.

v-if en <template> ​

Debido a que v-if es una directiva, debe adjuntarse 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 sirve como un envoltorio invisible. El resultado final 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 se pueden usar en <template>.

v-show ​

Otra opción para mostrar condicionalmente un elemento es la directiva v-show. El uso es en gran medida 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 solo alterna 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 un renderizado condicional "real" porque asegura que los listeners de eventos y los componentes hijos dentro del bloque condicional sean correctamente destruidos y recreados durante las alternancias.

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 vuelva verdadera por primera vez.

En comparación, v-show es mucho más simple: el elemento siempre se renderiza independientemente de la condición inicial, con alternancia basada en CSS.

En términos generales, v-if tiene mayores costos de alternancia mientras que v-show tiene mayores costos de renderizado inicial. Por lo tanto, prefiere v-show si necesitas alternar algo muy a menudo, y prefiere v-if si es poco probable que la condición cambie en tiempo de ejecución.

v-if con v-for ​

Cuando v-if y v-for se usan ambos en el mismo elemento, v-if se evaluará primero. Consulta la guía de renderizado de listas para más detalles.