单击几秒钟后如何显示div

Posted 2023-02-16

【中文标题】单击几秒钟后如何显示div

【英文标题】：how to show div after click only for few seconds

【发布时间】：2022-01-11 16:10:37

【问题描述】：

我正在与BootstrapVue 合作。

我有 - 我认为 - 一个非常简单的问题，但我找不到任何对我有用的东西。我有一个 <b-button>，我想点击它，然后第二个 <div> 应该显示，但只显示 3 秒。

我希望我的代码没有 jQuery - 我怎样才能做到这一点？

谢谢！

<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>You've clicked it!</p>
  </div>
</div>

【问题讨论】：

clickIt() 内部发生了什么？但你可以设置一个setTimeout(() => /* What ever is needed to revert what happened in clickIt()*/, 3000)

【参考方案1】：

我希望这能解决您的问题。

<div class="row mb-3">
  <div class="col-8 col-md-6 mt-4 ml-1">
    <b-button @click="clickIt()"</b-button>
  </div>
  <div v-if="isClicked" class="col-2 col-md-5 mt-4">
    <p>You've clicked it!</p>
  </div>
</div>

export default 
  data: () => 
    return  isClicked: false ;
  ,
  methods: 
    clickIt() 
      this.isClicked = true
      setTimeout(() => 
        this.isClicked = false;
      , 3000);
    ,
  ,
;