Junior
Indica le differenze tra le direttive v-show e v-if.
sobes.tech AI
Risposta dell'AI
v-if rende condizionalmente un elemento, rimuovendolo completamente dal DOM se la condizione è falsa. v-show rende sempre l'elemento, ma alterna la sua proprietà CSS display tra none e il valore originale a seconda della condizione.
Differenze in termini di prestazioni / utilizzo:
- v-if: Rendering iniziale più pesante, ma migliori prestazioni in caso di cambiamenti rari, poiché gli elementi vengono completamente rimossi dal DOM.
- v-show: Rendering iniziale più leggero, ma più adatto per elementi che cambiano frequentemente, poiché cambia solo la proprietà CSS.
Esempio di utilizzo:
<!-- Uso di v-if -->
<template>
<div v-if="isVisible">
Questo blocco è visibile solo se isVisible è vero
</div>
<!-- Uso di v-show -->
<div v-show="isVisible">
Questo blocco è sempre nel DOM, ma visibile solo se isVisible è vero
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
};
}
}
</script>