Vue3 v-show Directiva
Directivas integradas de Vue3v-showLa directiva se utiliza para alternar la visibilidad de un elemento según el valor de verdad de la expresión. Controla la visualización y ocultación del elemento mediante la propiedad display de CSS.
Descripción básica
v-showLa directiva determina si el elemento se muestra según el valor de verdad de la expresión vinculada. Tanto si la condición es verdadera como falsa, el elemento se renderiza en el DOM; solo se controla su visibilidad mediante CSS.
- Tipo esperado: any
- Función: Alterna la visibilidad del elemento según el valor de verdad de la expresión, controlada mediante la propiedad display de CSS.
Diferencia entre v-show y v-if
| Característica | v-show | v-if |
|---|---|---|
| Método de renderizado | Siempre se renderiza en el DOM, solo controla mostrar/ocultar | Se renderiza cuando la condición es verdadera, no se renderiza cuando es falsa |
| Rendimiento de alternancia | Costo de alternancia bajo (solo cambia CSS) | Costo de alternancia alto (requiere crear/destruir elementos) |
Escenarios de uso
1. Cambios frecuentes del estado de visualización
Cuando un elemento necesita mostrarse/ocultarse con frecuencia, usar v-show ofrece mejor rendimiento:
Ejemplo
<template>
<div>
<button @click="showModal = true">Abrir ventana emergente</button>
<div class="modal" v-show="showModal" @click="showModal = false">
<div class="modal-content" @click.stop>
<p>Esta es una ventana emergente</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return { showModal: false }
}
}
</script>
<div>
<button @click="showModal = true">Abrir ventana emergente</button>
<div class="modal" v-show="showModal" @click="showModal = false">
<div class="modal-content" @click.stop>
<p>Esta es una ventana emergente</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return { showModal: false }
}
}
</script>
Otras extensiones