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>