Tutorial Vuejs: Renderizado condicional con v-if

¿Qué es el renderizado condicional?

El renderizado condicional en Vue permite controlar la renderización de elementos en el DOM basándose en condiciones específicas. Utilizando directivas como v-if, v-else-if, y v-else, se puede determinar si un bloque de código se debe renderizar o no, dependiendo de la evaluación de una expresión booleana.

El renderizado condicional es una técnica esencial para manejar la lógica de presentación en aplicaciones Vue, permitiendo un control preciso sobre qué elementos deben ser visibles en función de los datos y estados de la aplicación.

Uso básico de v-if

La directiva v-if en Vue permite condicionar la renderización de un elemento basado en la evaluación de una expresión booleana. Esta directiva es especialmente útil para controlar la visibilidad de componentes y elementos en la interfaz de usuario, asegurando que solo se muestren cuando ciertas condiciones se cumplen.

Para utilizar v-if, se debe añadir la directiva al elemento HTML que se desea condicionar. La expresión dentro de v-if se evalúa y, si es true, el elemento se renderiza; si es false, el elemento no se renderiza en absoluto.

Ejemplo básico

<template>
    <button type="button" @click="mostrarMensaje()">Mostrar Mensaje</button>
    <p v-if="mensaje">Este es un mensaje condicional.</p>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    let mensaje = ref(false);
    const mostrarMensaje = () => { mensaje.value = !mensaje.value };
</script>

En este ejemplo, el párrafo <p> se renderizará solo si la propiedad mensaje es true. Si mensaje es false, el párrafo no aparecerá en el DOM, para ello creamos una función flecha mostrarMensaje, la cual cambiara el valor de mensaje cuando se haga clic sobre el botón Mostrar Mensaje.

Consideraciones sobre el uso de v-if

Es importante tener en cuenta que v-if no solo oculta el elemento del DOM, sino que lo elimina completamente cuando la condición es false. Esto significa que cualquier estado interno o datos del componente se perderán si el componente es removido y luego vuelto a agregar.

Para casos donde se desee mantener el estado del componente, se puede considerar el uso de v-show, que simplemente oculta el componente mediante CSS en lugar de eliminarlo del DOM. Sin embargo, v-show no debe ser utilizado para condiciones que cambian frecuentemente, ya que v-if es más eficiente en términos de rendimiento en esos casos.

Ejemplo avanzado

<template>
  <div>
    <p v-if="user && user.isActive">El usuario está activo.</p>
    <p v-if="user && !user.isActive">El usuario no está activo.</p>
    <p v-if="!user">No hay usuario logueado.</p>
  </div>
</template>

<script setup lang="ts">
  const user = {
    isActive: false
  }
</script>

En este ejemplo, se utilizan múltiples directivas v-if para manejar diferentes estados de un objeto user. Dependiendo de si el usuario está activo, inactivo o no existe, se renderiza un mensaje diferente. Este patrón es útil para manejar casos complejos de renderización condicional en la interfaz de usuario.

Manejo de múltiples condiciones con v-if con v-else y v-else-if

La directiva v-if de Vue permite el renderizado condicional de elementos en el DOM. Sin embargo, en muchos casos, se requiere manejar múltiples condiciones de manera eficiente, para lo cual se utilizan v-else y v-else-if. Estas directivas permiten crear bloques condicionales complejos que mejoran la legibilidad y mantenibilidad del código.

Uso de v-else

La directiva v-else se utiliza para definir un bloque de código que se renderiza únicamente cuando la condición v-if anterior es false. Es esencial que v-else esté inmediatamente después de un bloque v-if o v-else-if sin ningún otro contenido intermedio.

<template>
  <div>
    <p v-if="isLoggedIn">Bienvenido, usuario.</p>
    <p v-else>Por favor, inicia sesión.</p>
  </div>
</template>

<script setup lang="ts">
  const isLoggedIn = false
</script>

En este ejemplo, si isLoggedIn es true, se muestra el mensaje "Bienvenido, usuario.". De lo contrario, se muestra "Por favor, inicia sesión.".

Uso de v-else-if

La directiva v-else-if permite agregar condiciones adicionales a un bloque v-if. Esto es útil cuando se tienen múltiples condiciones que evaluar. Similar a v-else, v-else-if debe colocarse inmediatamente después de un bloque v-if o v-else-if anterior.

<template>
    <p v-if="estado === 'cargando'">Cargando...</p>
    <p v-else-if="estado === 'exito'">Operación exitosa.</p>
    <p v-else>Empezar.</p>
    <div class="btns-container">
        <button @click="cambiarEstado('cargando')">Cargar</button>
        <button @click="cambiarEstado('exito')">Terminar</button>
        <button @click="cambiarEstado('')">Limpiar</button>
    </div>
  </template>
  
<script setup lang="ts">
    import { ref } from 'vue';

    const estado = ref("") // Puede ser 'cargando', 'exito' o cualquier otro valor
    const cambiarEstado = (nuevoEstado: string) => {
        estado.value = nuevoEstado
    }

</script>

<style>
    .btns-container {
        display: flex;
        gap: 1em;
    }
</style>

En este ejemplo, se maneja una variable estado que puede tener diferentes valores. Dependiendo del valor de estado, se renderizará un mensaje diferente. Si estado es 'cargando', se mostrará el mensaje "Cargando...". Si estado es 'exito', se mostrará "Operación exitosa.". Si estado está vacio, se mostrará "Empezar.". Si estado tiene cualquier otro valor, se mostrará "Ha ocurrido un error.". Todo estos diferentes comportamientos los manejamos a través de una serie de botones que nos permiten cambiar el estado de la variable estado

Estructura y orden

Es importante mantener el orden correcto de las directivas para asegurar que las condiciones se evalúen como se espera. v-else y v-else-if deben seguir inmediatamente a un bloque v-if o v-else-if anterior. Cualquier contenido intermedio romperá la relación entre estos bloques condicionales, resultando en un comportamiento inesperado.

<template>
  <div>
    <p v-if="age < 18">Eres menor de edad.</p>
    <p v-else-if="age >= 18 && age < 65">Eres un adulto.</p>
    <p v-else>Eres un adulto mayor.</p>
  </div>
</template>

<script setup lang="ts">
  const age = 25;
</script>

En este ejemplo, la variable age se evalúa en tres condiciones diferentes. Si age es menor que 18, se muestra "Eres menor de edad.". Si age está entre 18 y 64 (inclusive), se muestra "Eres un adulto.". Para cualquier otro valor de age, se muestra "Eres un adulto mayor.".

Evitar redundancias

Cuando se manejan múltiples condiciones, es fundamental evitar redundancias y mantener el código limpio y legible. Las condiciones deben ser lo más claras y concisas posible para facilitar su mantenimiento y comprensión.

<template>
  <div>
    <p v-if="user.role === 'admin'">Tienes privilegios de administrador.</p>
    <p v-else-if="user.role === 'editor'">Tienes privilegios de editor.</p>
    <p v-else-if="user.role === 'viewer'">Tienes privilegios de visualización.</p>
    <p v-else>No tienes privilegios asignados.</p>
  </div>
</template>

<script setup lang="ts">
  const user = {
    role: "admin"
  }
</script>

En este ejemplo, la variable user.role se evalúa para determinar los privilegios del usuario. Dependiendo del rol ('admin', 'editor', 'viewer'), se muestra un mensaje específico. Si el rol no coincide con ninguna de las condiciones anteriores, se muestra "No tienes privilegios asignados.".

Diferencia entre v-if y v-show

La directiva v-if y la directiva v-show en Vue.js permiten condicionar la visibilidad de elementos en el DOM, pero funcionan de manera diferente y tienen implicaciones distintas en términos de rendimiento y comportamiento.

v-if es una directiva que se utiliza para renderizar un elemento solo si la condición especificada se evalúa como true. Cuando la condición es false, el elemento no se renderiza en absoluto y se elimina del DOM. Esto implica que si la condición cambia frecuentemente, el elemento se creará y destruirá repetidamente, lo cual puede tener un impacto en el rendimiento.

<template>
  <div>
    <p v-if="mostrarMensaje">Este mensaje se renderiza solo si mostrarMensaje es verdadero.</p>
  </div>
</template>

<script setup lang="ts">
  const mostrarMensaje = true;
</script>

En este ejemplo, el párrafo <p> se agrega al DOM solo si mostrarMensaje es true. Si mostrarMensaje cambia a false, el párrafo se elimina del DOM.

Por otro lado, v-show también condiciona la visibilidad de un elemento, pero en lugar de eliminarlo del DOM, simplemente aplica la propiedad CSS display: none cuando la condición es false. Esto significa que el elemento siempre está presente en el DOM, aunque no sea visible. v-show es útil para condiciones que se evalúan frecuentemente, ya que evita el costo de agregar y quitar elementos del DOM.

<template>
  <div>
    <p v-show="mostrarMensaje">Este mensaje se muestra u oculta según la condición mostrarMensaje.</p>
  </div>
</template>

<script setup lang="ts">
  const mostrarMensaje = true;
</script>

En este ejemplo, el párrafo <p> permanece en el DOM independientemente del valor de mostrarMensaje. Si mostrarMensaje es false, el párrafo se oculta mediante CSS, pero sigue existiendo en el DOM.

Consideraciones de rendimiento

Uso de v-if: Es más adecuado para condiciones que no cambian frecuentemente. Al eliminar y volver a crear el elemento, se asegura que el DOM solo contiene los elementos necesarios en un momento dado, lo cual puede ser beneficioso para el rendimiento en ciertas situaciones. Sin embargo, esta operación puede ser costosa si la condición cambia con frecuencia.

Uso de v-show: Es más eficiente para condiciones que cambian frecuentemente, ya que simplemente alterna la visibilidad del elemento sin eliminarlo ni recrearlo. Esto evita el costo de manipulación del DOM, pero puede dejar elementos no visibles en el DOM, lo cual puede ser una consideración en términos de memoria y complejidad del DOM.

Ejemplos prácticos

v-if con componentes

<template>
  <div>
    <mi-componente v-if="mostrarComponente"></mi-componente>
  </div>
</template>

<script setup lang="ts">
  import MiComponente from './MiComponente.vue';

  const mostrarComponente = true;
</script>

En este caso, MiComponente solo se carga en el DOM cuando mostrarComponente es true. Si mostrarComponente cambia a false, el componente se destruye y se pierde cualquier estado interno.

v-show con componentes

<template>
  <div>
    <mi-componente v-show="mostrarComponente"></mi-componente>
  </div>
</template>

<script setup lang="ts">
  import MiComponente from './MiComponente.vue';

  const mostrarComponente = true;
</script>

Aquí, MiComponente siempre está presente en el DOM, pero su visibilidad se controla mediante CSS. Si mostrarComponente es false, el componente se oculta pero mantiene su estado interno.

Resumen de diferencias

• v-if: Añade y elimina elementos del DOM según la condición. Útil para condiciones que no cambian frecuentemente.
• v-show: Alterna la visibilidad de los elementos mediante CSS. Útil para condiciones que cambian frecuentemente.

Seleccionar entre v-if y v-show depende de la frecuencia con la que la condición cambia y de las necesidades específicas de la aplicación en términos de rendimiento y manejo del DOM.

Buenas prácticas y consideraciones

Al utilizar v-if en Vue, es crucial seguir ciertas buenas prácticas y tener en cuenta algunas consideraciones para asegurar un código eficiente y fácil de mantener.

• Evitar condiciones complejas en v-if: Mantén las expresiones dentro de v-if lo más simples posibles. Las condiciones complejas pueden dificultar la lectura del código y la depuración. En lugar de esto, considera crear propiedades calculadas o funciones que encapsulen la lógica compleja.

<template>
  <div>
    <p v-if="isUserEligible()">El usuario es elegible.</p>
  </div>
</template>

<script setup lang="ts">
  const user = {
    age: 25,
    isActive: true
  };

  const isUserEligible = () => {
    return user.age > 18 && user.isActive;
  }
</script>

Uso adecuado de v-else-if y v-else: Asegúrate de que v-else-if y v-else sigan inmediatamente a un bloque v-if o v-else-if sin contenido intermedio. Esto garantiza que las condiciones se evalúen de manera secuencial y correcta.

Consideraciones de rendimiento: Utiliza v-if para condiciones que no cambian frecuentemente y v-show para aquellas que sí lo hacen. v-if elimina y recrea elementos del DOM, lo que puede ser costoso en términos de rendimiento si la condición cambia a menudo. Por otro lado, v-show simplemente alterna la visibilidad del elemento mediante CSS, manteniéndolo en el DOM.

Mantener el estado del componente: Si necesitas preservar el estado interno de un componente, v-show es más adecuado que v-if, ya que v-if destruye y recrea el componente, perdiendo cualquier estado interno.

Evitar el uso excesivo de v-if: Si tienes múltiples condiciones que determinan la visibilidad de elementos similares, considera refactorizar tu lógica para reducir la cantidad de directivas v-if en tu template. Esto puede mejorar la legibilidad y el rendimiento.

Uso de key con v-if: Cuando se renderizan listas o elementos dinámicos, utiliza la propiedad key para asegurar que Vue pueda identificar y actualizar los elementos de manera eficiente. Esto es especialmente importante cuando se combinan v-if y v-for.

<template>
    <div>
        <ul>
            <li v-for="item in items" :key="item.id">
                <p v-if="item.isVisible">
                    {{ item.name }}
                </p>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
    const items = [
        { id: 1, name: 'Item 1', isVisible: true },
        { id: 2, name: 'Item 2', isVisible: false },
        { id: 3, name: 'Item 3', isVisible: true }
    ]
</script>

Adherirse a estas buenas prácticas y consideraciones te ayudará a escribir código Vue más eficiente, mantenible y fácil de entender, mejorando tanto el rendimiento de tu aplicación como la experiencia de desarrollo.