Directivas v-show y v-if (condicionales)

Las directivas de Vue v-show y v-if nos permiten establecer condiciones directamente en nuestro etiquetado HTML, sin tener que recurrir a lógica Javascript o realizar código más complejo. Esto nos permite crear múltiples posibilidades directamente en nuestra parte del template, haciendo el código mucho más sencillo.

Las directivas que veremos en este capítulo son las siguientes:

Vamos a analizar cada una de ellas y ver sus diferencias. En principio, disponemos de v-show y v-if para hacer lo que en principio podría parecer lo mismo, una condición para una opción A o una opción B.

La directiva v-show

La directiva v-show se define como una directiva que muestra u oculta algo, dependiendo del valor que tenga: si es true lo muestra, si es false lo oculta con CSS, mediante un display: none. Un ejemplo para ilustrar esto:

<template>
  <div>
    Usuario: Manz
    <span v-show="login">(Identificado)</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      login: true
    }
  }
}
</script>

En el caso de que el valor sea false, veremos que la etiqueta <span> existe en el código fuente resultante del navegador, pero tiene aplicado un atributo style a display: none que hace que no se muestre visualmente.

Esta directiva nos puede interesar para mantener el código en el HTML y cambiar rápidamente a medida que se modifique el valor de la variable indicada. En lugar de una variable, también se puede indicar una expresión o algo que se pueda evaluar como verdadero o falso, por ejemplo, navigator.userAgent.includes("Firefox"), que devuelve true o false, dependiendo de si se está usando el navegador Firefox.

La directiva v-if

La directiva v-if hace algo muy parecido a la directiva v-show pero tiene una diferencia principal: mientras que v-show mantiene el código en el HTML y lo oculta o muestra con CSS dependiendo del valor indicado, v-if evaluará la condición y si es falsa no la colocará en el HTML. Además, con v-if podemos usar v-else y/o v-else-if, por lo que es algo más potente.

Un ejemplo sencillo, para compararlo con la directiva anterior v-show:

<template>
  <div>
    Usuario: Manz
    <span v-if="login">(Identificado)</span>
    <span v-else>(No identificado)</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      login: true
    }
  }
}
</script>

Observa que en este caso, si login es verdadero, el segundo <span> no aparece si inspeccionamos el código. Por otro lado, si login es falso, el primer <span> no aparecerá en el código HTML.

Además, el v-else nos permite mayor flexibilidad. Con la directiva v-show podríamos haber usado algo como lo siguiente, que es equivalente al v-if y v-else:

  <div>
    Usuario: Manz
    <span v-show="login">(Identificado)</span>
    <span v-show="!login">(No identificado)</span>
  </div>

Ten en cuenta que !login se evalua como «lo contrario» de login, por lo que conseguimos la operación contraria. Sin embargo, la opción del v-if y v-else parece mucho más lógica y clara en esta ocasión. Además, podemos también beneficiarnos de los v-else-if:

<template>
  <div>
    Usuario: Manz
    <span v-if="login & admin">(Administrador)</span>
    <span v-else-if="login">(Identificado)</span>
    <span v-else>(No identificado)</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      login: true,
      admin: true,
    };
  },
};
</script>

En este caso, observa que mostramos el texto (Administrador) si eres admin y estas logueado login, el mensaje (Identificado) si estás logueado pero no eres administrador y el resto, (No identificado).

Recuerda siempre que lo que indicamos en los valores de las directivas son expresiones Javascript, por lo tanto no tienen que ser obligatoriamente el nombre de una variable de Vue, sino que puede ser una expresión válida de JS.