Vue.Renderización condicional JS
Vue.JS es una biblioteca fácil de aprender y accesible que podemos comenzar a construir aplicaciones web con el conocimiento básico del desarrollo web. En vue.JS, a los desarrolladores les encanta codificar y sentir libertad mientras desarrollan aplicaciones.
En cualquier aplicación web dinámica, la representación condicional es una parte necesaria. Vue.JS proporciona diferentes formas de representación condicional, y podemos usar cualquiera de las siguientes formas que se adapten a nuestro propósito:
- show en V
- V-IF
- V-else
En este artículo, probaremos estas directivas proporcionadas por Vue.JS para la representación condicional y comprenderlos de una mejor manera.
show en V
El show en V solo oculta el elemento al deshabilitar su visibilidad. Oculta el elemento si el valor de la expresión o variable pasada no es verdad.
Por ejemplo:
Este párrafo no está oculto
Este párrafo está oculto
V-IF
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 vuelve verdadera.
Por ejemplo:
Este es un párrafo
Hay una característica adicional en la Directiva V-IF en comparación con la Directiva V-Show. Podemos aplicarlo al bloque de plantilla también si no queremos representar nada entre ese bloque. O hay un componente infantil en eso o en muchos otros elementos.
Por ejemplo:
Este es un encabezado
Este es un párrafo
V-else
También podemos usar la Directiva V-Else junto con la declaración V-IF para renderizar condicionalmente entre cualquiera de los dos bloques. Pero, teniendo en cuenta que el bloque V-Else debe tener que aparecer justo después del bloqueo V-if.
Por ejemplo:
Este párrafo hará si 'isvar' se hace realidad
De lo contrario, este párrafo se presentará.
Podemos aplicar V-Else en el bloque de plantilla también.
Este es un encabezado
Este es un párrafo
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:
Auto
Libro
Animal
Ninguno de los ablove
V-IF VS. show en V
El tipo de V-IF y V-Show hace la misma tarea. Ambos esconden los elementos en el DOM basados en el valor de verdad o fals.
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 alternando, mientras que V-Show cuesta más al comienzo de la representación. Por lo tanto, sería aconsejable usar el show en V al alternar es un propósito. De lo contrario, se prefiere V-IF.
Terminando
En este artículo, hemos aprendido a renderizar condicionalmente el DOM en Vue.JS usando directivas V-IF y V-Else. Hemos mostrado algunos ejemplos y aprendimos sobre la diferencia real entre V-Show y V-IF Directive. Si este artículo lo ayuda a tener una mejor comprensión y conceptos, sigue visitando Linuxhint.com para contenido tan útil.