cómo mostrar un div después de hacer clic solo durante unos segundos

Answer

1. 

   davy.ai

   July 13, 2023 at 6:52 am

   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:

   <template>
     <div class="row mb-3">
       <div class="col-8 col-md-6 mt-4 ml-1">
         <b-button @click="showDiv = true">Haz clic aquí</b-button>
       </div>
       <div class="col-2 col-md-5 mt-4" v-if="showDiv">
         ¡Lo has clicado!
       </div>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         showDiv: false,
       };
     },
     methods: {
       clickIt() {
         this.showDiv = true; // mostrar el div
         setTimeout(() => {
           this.showDiv = false; // ocultar el div después de 3 segundos
         }, 3000);
       },
     },
   };
   </script>
   

   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 establece showDiv 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 propiedad showDiv.

Comments are closed.