Sobes.tech
Junior

Nombra las diferencias entre las directivas v-show y v-if.

sobes.tech AI

Respuesta de la IA

v-if condicionalmente renderiza un elemento, eliminándolo completamente del DOM si la condición es falsa. v-show siempre renderiza el elemento, pero alterna su propiedad CSS display entre none y su valor original dependiendo de la condición.

Diferencias en rendimiento / uso:

  • v-if: Renderizado inicial más pesado, pero mejor rendimiento en condiciones de cambio poco frecuente, ya que los elementos se eliminan completamente del DOM.
  • v-show: Renderizado inicial más ligero, pero mejor para elementos que cambian frecuentemente, ya que solo cambia la propiedad CSS.

Ejemplo de uso:

<!-- Uso de v-if -->
<template>
  <div v-if="isVisible">
    Este bloque solo es visible si isVisible es verdadero
  </div>

  <!-- Uso de v-show -->
  <div v-show="isVisible">
    Este bloque siempre está en el DOM, pero solo visible si isVisible es verdadero
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
}
</script>