Sobes.tech
Junior

Nome as diferenças entre as diretivas v-show e v-if.

sobes.tech IA

Resposta da IA

v-if condicionalmente renderiza um elemento, removendo-o completamente do DOM se a condição for falsa. v-show sempre renderiza o elemento, mas alterna a sua propriedade CSS display entre none e o valor original dependendo da condição.

Diferenças em desempenho / uso:

  • v-if: Renderização inicial mais pesada, mas melhor desempenho em condições de mudança pouco frequente, pois os elementos são completamente removidos do DOM.
  • v-show: Renderização inicial mais leve, mas melhor para elementos que mudam frequentemente, pois apenas altera a propriedade CSS.

Exemplo de uso:

<!-- Uso de v-if -->
<template>
  <div v-if="isVisible">
    Este bloco é visível apenas se isVisible for verdadeiro
  </div>

  <!-- Uso de v-show -->
  <div v-show="isVisible">
    Este bloco está sempre no DOM, mas visível apenas se isVisible for verdadeiro
  </div>
</template>

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