Mostrar y ocultar elementos usando v-if y v-show con Vue.js 2

En esta lección aprenderemos cómo mostrar elementos de forma condicional haciendo uso de las directivas v-if, v-else, v-else-if y v-show de Vue.js. Además practicaremos nuestras habilidades para trabajar con formularios en Vue.

Notas

$data es una variable especial de Vue.js y con ella podemos examinar nuestra propiedad data de nuestro objeto VM.

En nuestro ejemplo indicamos a Vue que queremos que el valor de nuestro radio sea un boleano y no una cadena de texto haciendo uso de la directiva v-bind.

<input type="radio" v-model="vue.exp" v-bind:value="true"> // true será almacenado como un boleano.

Recordemos que también podemos usar la sintaxis corta para la directiva v-bind.

<!-- Esto funcionará igual que si usaramos v-bind:value="true" -->
<input type="radio" v-model="vue.exp" :value="true">

<template> nos permite agrupar una serie de elementos para luego ser mostrados de forma condicional sin necesidad de añadir una capa o div extra a nuestra página.

<template v-if="vue.exp">
    <div class="form-group">
        ...
    </div>
    <div class="form-group">
        ...
    </div>
    <div class="form-group">
        ...
    </div>
</template>

En Vue.js también podemos hacer uso de la directiva v-else-if.

<div v-if="vue.years < 2">
    ...
</div>
<div v-else-if="vue.years >= 2">
    ...
</div>

Alterar el DOM es un proceso pesado, por lo tanto Vue.js trata de optimizar este proceso realizando la menor cantidad de cambios en el DOM. Sin embargo, si queremos alterar este comportamiento por defecto, debemos especificarlo con el uso de la propiedad key en los elementos que no queremos que Vue reutilice.

La directiva v-show también nos permite mostrar y ocultar elementos en nuestra página, de forma similar a v-if y v-else. La diferencia es que v-if no solamente oculta los elementos del DOM si no que los elimina por completo.

Es importante destacar que la directiva v-show no funciona con la etiqueta template.

<!-- Esto no funcionará -->
<template v-show="vue.exp">
    <div class="form-group">
    ...
    </div>
    ...

Por tanto, si queremos agrupar una serie de elementos y hacer uso de v-show debemos usar otra etiqueta, por ejemplo <div>.

Un aspecto importante al decidir si usar v-if o v-show es que la directiva v-show es mucho más rápida ya que no elimina por completo los elementos del DOM al ocultarlos. Sin embargo, si queremos hacer uso de la directiva v-else debemos utilizar v-if ya que v-else tampoco funciona con v-show.

<!-- Esto no funcionará -->
<div v-show="vue.years < 2">
    ...
</div>
<div v-else>
    ...
</div>

Ejercicio

Haciendo uso de la directiva v-if o v-show imprimir debajo del campo description un mensaje de validación cuando el usuario no haya escrito ninguna descripción.

Puedes compartir tu código utilizando herramientas como JSFiddle o Gist de GitHub, también puedes compartir tu código en los comentarios debajo, pero asegúrate de usar la etiqueta <code> para darles formato.

Si ya eres parte de Styde, también puedes compartir tu código e inquietudes a través de nuestro Slack.

Únete a nuestra comunidad en Discord y comparte con los usuarios y autores de Styde, 100% gratis.

Únete hoy

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.