Vue.js es una biblioteca accesible y fácil de aprender en la que podemos comenzar a construir aplicaciones web con los conocimientos básicos de desarrollo web. En vue.js, a los desarrolladores les encanta codificar y sentirse libres al desarrollar aplicaciones.

En cualquier aplicación web dinámica, la representación condicional es una parte necesaria. Vue.js proporciona diferentes formas de renderizado condicional, y podemos usar cualquiera de las siguientes formas que se adapten a nuestro propósito:

• v-show
• v-si
• v-else

En este artículo, probaremos estas directivas proporcionadas por Vue.js para la representación condicional y entenderlos de una mejor manera.

v-show

El v-show solo oculta el elemento desactivando su visibilidad. Oculta el elemento si el valor de la expresión o variable pasada no es veraz.

Por ejemplo:

Este párrafo no está oculto

Este párrafo está oculto

v-si

Por otro lado, v-if no oculta el elemento, pero tampoco representa nada hasta que el valor de la expresión o variable pasada se convierte en verdadero.

Por ejemplo:

Hay una característica adicional en la directiva v-if en comparación con la directiva v-show. También podemos aplicarlo al bloque de plantilla si no queremos renderizar nada entre ese bloque. O hay un componente hijo en ese o muchos otros elementos.

Por ejemplo:

v-else

También podemos usar la directiva v-else junto con la instrucción v-if para renderizar condicionalmente entre cualquiera de los dos bloques. Pero, teniendo en cuenta que el bloque v-else debe aparecer justo después del bloque v-if.

Por ejemplo:

Este párrafo se procesará si 'isVar' se convierte en verdadero

De lo contrario, este párrafo se renderizará.

También podemos aplicar v-else en el bloque de plantilla.

v-else-if

Al igual que v-else, también podemos usar la directiva v-else-if junto con la directiva v-if.

Por ejemplo:

v-if vs. v-show

El v-if y v-show hacen la misma tarea. Ambos ocultan los elementos en el DOM según el valor de veracidad o falsedad de la expresión pasada, pero con una sutil diferencia de ocultar y no representar elementos.

Si comparamos el tiempo y el costo de procesamiento entre estos dos. El v-if cuesta más durante el tiempo de ejecución o al alternar, mientras que v-show cuesta más al comienzo del renderizado. Por lo tanto, sería prudente usar v-show cuando alternar es un propósito. De lo contrario, se prefiere v-if.

Terminando

En este artículo, hemos aprendido cómo renderizar condicionalmente el DOM en Vue.js usando las directivas v-if y v-else. Hemos mostrado algunos ejemplos y hemos aprendido sobre la diferencia real entre la directiva v-show y v-if. Si este artículo le ayuda a comprender mejor los conceptos, continúe visitando linuxhint.com para un contenido tan útil.