Del curso: Vue.js esencial

Directiva v-show para mostrar u ocultar contenido en Vue.js - Tutorial de Vue.js

Del curso: Vue.js esencial

Comenzar mi mes de prueba gratis Comprar para mi equipo

Directiva v-show para mostrar u ocultar contenido en Vue.js

“

La directiva v-show es una directiva que podemos utilizar para ocultar o mostrar elementos dentro un componente de Vue. Aquí en este ejemplo, yo tengo un componente padre que renderiza un componente hijo. A la hora de hacer clic en este botón, el componente hijo se muestra o se oculta según el valor de una propiedad reactiva. Aquí puedes notar que, si yo cambio el valor de este input, también cambia el texto que se encuentra aquí. Si yo oculto el elemento y lo vuelvo a mostrar, puedes notar que el cambio permanece. Esto es porque la directiva v-show lo que hace es que oculta el elemento, pero no lo elimina de la memoria, por lo tanto, el estado del componente permanece. Esta es una de las diferencias fundamentales entre v-show y v-if. Ya aquí dentro del código, puedes encontrar la directiva v-show, que yo estoy utilizando para mostrar u ocultar el componente hijo. Puedes ver que este componente se renderiza dependiendo del valor de esta propiedad. Si yo cambiara esto por un v-if, podemos notar la diferencia a la hora de correr el ejemplo. Y aquí dentro del navegador, voy a refrescar y luego voy a hacer un cambio aquí. Oculto el elemento y lo vuelvo a mostrar, y puedes notar como el componente se ha reiniciado totalmente a la hora de utilizar v-if. Entonces, tú puedes utilizar la directiva v-show para mostrar u ocultar elementos, pero que mantengan el estado del mismo dentro de la memoria.

Contenido