Cómo implementar la representación condicional en Vue.js

Vue.js es un marco JavaScript popular que facilita la creación de aplicaciones web dinámicas. Vue.js puede representar contenido en función de datos y eventos. Esto es particularmente útil para crear interfaces de usuario receptivas e interactivas.

Aprenda qué son las directivas de Vue y cómo usarlas para lograr una representación condicional en Vue.js.

¿Qué son las directivas de Vue?

Las directivas de Vue le permiten mejorar el comportamiento de los elementos HTML en las plantillas de Vue.js al agregarles atributos únicos.

Las directivas son una parte fundamental de Vue.js y brindan una forma simple y poderosa de manipular el Modelo de objeto de documento (DOM), agregue comportamiento dinámico a los elementos y administre datos.

Además, Vue.js le permite crear directivas personalizadas, lo que le permite crear fácilmente funciones reutilizables para aplicaciones Vue.

El framework Vue antepone sus directivas con

"v-" antes del nombre de la directiva. Ejemplos de directivas de uso común en Vue incluyen v-on, unión en v, v-para, y v-si.

¿Qué es el renderizado condicional?

La representación condicional le permite mostrar u ocultar elementos según las condiciones que especifique. Por ejemplo, puede utilizar la representación condicional para mostrar un mensaje a los usuarios solo si han ingresado una dirección de correo electrónico válida.

En Vue.js, puede usar directivas como v-si y v-mostrar para lograr una representación condicional en su aplicación, diferente de cómo lo haría renderizar contenido condicionalmente en React.js.

Lograr la representación condicional con la directiva v-if

Similar a el JavaScript si... más declaración, el v-si directiva en Vue.js tiene una condición. Si no se cumple, Vue.js evalúa la siguiente condición especificada en un v-otro directiva y continúa haciéndolo hasta que cumple una condición o evalúa todas las condiciones.

Esta directiva le permite representar condicionalmente un elemento basado en un valor booleano. El compilador Vue.js no renderizará la parte si su valor es falso.

Aquí hay un ejemplo de representación de contenido condicionalmente con v-si:

html>
<htmlidioma="es">
<cabeza>
<título>Documentotítulo>
<guionorigen=" https://unpkg.com/vue@3/dist/vue.global.js">guion>
cabeza>
<cuerpo>
<divisiónidentificación="aplicación">
<h1v-si='FALSO' >{{ mensaje1 }}h1>
<h1v-otro >{{ mensaje2 }}h1>
división>
<guion>
 const app = Vue.createApp({
 datos () {
 devolver {
 mensaje1: 'Esta es tu aplicación Vue.',
 mensaje2: 'Aún no es una aplicación Vue.'
 }
 }
 })
 aplicación.mount('#aplicación')
guion>
cuerpo>
html>

El bloque de código anterior muestra una aplicación Vue creada al agregar un Red de entrega de contenido (CDN) enlace al cuerpo de su archivo HTML. La directiva v-if representará el elemento h1 solo si su condición es verdadera.

En las aplicaciones de Vue, hay situaciones en las que necesita renderizar un componente en función de criterios dinámicos específicos. Esto es útil en escenarios como mostrar información solo cuando un usuario hace clic en un botón o mostrar un indicador de carga mientras los datos se cargan desde una API.

Por ejemplo:

html>
<htmlidioma="es">
<cabeza>
<título>aplicación vuetítulo>
<guionorigen=" https://unpkg.com/vue@3/dist/vue.global.js">guion>
cabeza>
<cuerpo>
<divisiónidentificación="aplicación">
<divisiónv-si="mostrarUsuarios">
<ul>
<li>Usuario1li>
<li>Usuario2li>
ul>
división>
<botónactivado: haga clic="alternarMostrarUsuarios()">
 Alternar usuarios
botón>
<h1>{{ mensaje }}h1>
división>
<guion>
 const app = Vue.createApp({
 datos () {
 devolver {
 mostrarUsuarios: verdadero,
 mensaje: 'Esta es su aplicación Vue.'
 }
 },
 métodos: {
 alternarMostrarUsuarios() {
 this.showUsers = !this.showUsers
 }
 }
 })
 aplicación.mount('#aplicación')
guion>
cuerpo>
html>

El bloque de código anterior utiliza el v-si directiva para renderizar contenido condicionalmente basado en el valor de una variable booleana, mostrarUsuarios.

El división El elemento se muestra si el valor es verdadero y escondido si es FALSO. Al hacer clic en el Alternar usuarios botón activa el alternarMostrarUsuarios() método para cambiar el valor de mostrarUsuarios.

Este ejemplo también utiliza el v-on directiva para escuchar eventos, como un evento de clic en el botón. Se vuelve a evaluar la v-si directiva siempre que el valor de mostrarUsuarios cambios.

Lograr renderizado condicional con la directiva v-show

El v-mostrar La directiva es otra forma de mostrar u ocultar elementos en Vue.js de forma condicional. es similar a la v-si directiva en la que puede representar elementos basados ​​en una expresión booleana. Sin embargo, hay algunas diferencias críticas entre las dos directivas.

El v-mostrar La directiva no elimina el elemento del DOM cuando la expresión se evalúa como falsa. En su lugar, utiliza CSS para alternar el elemento mostrar propiedad entre ninguno y su valor original.

Esto significa que el elemento todavía está presente en el DOM pero no es visible cuando la expresión es falsa.

Aquí hay un ejemplo:

<cuerpo>
<divisiónidentificación="aplicación">
<divisiónv-si="mostrarUsuarios">
<ul>
<li>Usuario1li>
<li>Usuario2li>
ul>
división>
<botónactivado: haga clic="alternarMostrarUsuarios()">
 Alternar usuarios
botón>
<h1v-mostrar="mostrarUsuarios">{{ mensaje }}h1>
división>
<guion>
 const app = Vue.createApp({
 datos () {
 devolver {
 mostrarUsuarios: verdadero,
 mensaje: 'Estos son los usuarios de la aplicación Vue'
 }
 },
 métodos: {
 alternarMostrarUsuarios() {
 this.showUsers = !this.showUsers
 }
 }
 })
 aplicación.mount('#aplicación')
guion>
cuerpo>

El bloque de código anterior utiliza el v-mostrar directiva para mostrar un mensaje que dice, 'Estos son los usuarios de la aplicación Vue’ cada vez que haga clic en el botón de alternancia.

Elegir entre v-if y v-show

Al decidir entre usar el v-si y v-mostrar directivas para mostrar u ocultar elementos en Vue.js condicionalmente, hay algunos factores importantes a considerar.

Cuando la condición rara vez cambia, usando el v-si la directiva es buena. Esto es porque v-si elimina el elemento del DOM cuando la condición es falsa, lo que puede dificultar el rendimiento óptimo. El elemento solo se representa una vez que la condición se vuelve verdadera y se elimina del DOM cuando la condición vuelve a ser falsa.

Por otro lado, si es probable que la condición cambie con frecuencia, es mejor usar el v-mostrar directiva, lo que mejora el rendimiento. Esto es porque v-mostrar usa CSS para ocultar o mostrar el elemento alternando la propiedad de visualización de CSS entre ninguno y bloquear, dejando el elemento siempre representado en el DOM.

Representación condicional en su aplicación Vue simplificada

Ha aprendido a renderizar contenido condicionalmente en aplicaciones Vue con las directivas v-if y v-show. Al utilizar estas directivas, puede representar contenido rápidamente en función de varias condiciones, lo que le brinda más control sobre la apariencia y el comportamiento de sus componentes de Vue.