Introducción a las directivas de Vue.js con v-if, v-show y v-else

En Vue.js, una directiva es el término usado para referirse a algunos atributos especiales, identificados con v-, que le indican a Vue.js que debe realizar ciertos cambios en un elemento del DOM, cada vez que la expresión asociada con dicha directiva cambie. En esta segunda lección del Curso de Vue.js aprenderemos más sobre las directivas en general y usaremos las directivas v-show, v-if y v-else por primera vez.

Repositorio

Ver el código de esta lección en GitHub

Notas

Two-way data binding significa un enlace en dos direcciones, es decir, que el modelo puede cambiar la vista, pero que la vista también puede cambiar al modelo, lo que implica que siempre todo estará actualizado automáticamente.

Las directivas vistas en esta lección:

v-if agrega o elimina condicionalmente un elemento al DOM.
v-show alternativa de v-if, oculta o muestra un elemento con CSS.
v-else para mostrar un elemento cuando v-if o v-show se evalúe como falso.

Con <template> podemos agrupar varios elementos del HTML, para luego utilizar una sola directiva de Vue.js en dicho template. Sin embargo, v-show no funciona con template, en ese caso, se puede usar un div un span o utilizar v-if.