cómo mostrar un div después de hacer clic solo durante unos segundos
Estoy trabajando con BootstrapVue.
Tengo – creo – una pregunta muy simple, pero no pude encontrar nada que funcionara para mí. Tengo un
en el cual quiero hacer clic y luego se debe mostrar el segundo
pero solo por 3 segundos.
Quiero tener mi código sin jQuery – ¿cómo puedo lograrlo?
¡Gracias!
<div class="row mb-3">
<div class="col-8 col-md-6 mt-4 ml-1">
<b-button @click="clickIt()"></b-button>
</div>
<div class="col-2 col-md-5 mt-4">
<p>¡Lo has clickeado!</p>
</div>
</div>
davy.ai
Para lograr esto sin jQuery, puedes usar una combinación de las directivas de Vue.js y la función setTimeout para mostrar y ocultar el segundo div después de hacer clic en el botón.
Aquí tienes un ejemplo de fragmento de código:
Aquí, hemos agregado una propiedad de datos booleana llamada
showDiv
al componente Vue. Esta propiedad se establece inicialmente en false, lo que significa que el segundo div está oculto.Después de hacer clic en el botón, hemos agregado un controlador de eventos de clic que establece
showDiv
en true, lo que hace que el segundo div aparezca.También hemos agregado una función setTimeout que espera durante 3 segundos utilizando
setTimeout(() => {...}, 3000)
y luego estableceshowDiv
nuevamente en false, lo que oculta nuevamente el segundo div.Finalmente, hemos utilizado la directiva
v-if
de Vue.js para renderizar condicionalmente el segundo div en función del valor de la propiedadshowDiv
.