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>