如何在Vuejs中将按钮显示延迟到2s

Posted 2023-02-23

【中文标题】如何在Vuejs中将按钮显示延迟到2s

【英文标题】：How to delay a button display to 2s in Vuejs

【发布时间】：2020-09-27 04:18:45

【问题描述】：

我有一个在多个地方使用的按钮组件。但我想在特定页面上 2 秒后显示该按钮。 如何在 Vuejs/CSS 中实现这一点？

<OHButton
        v-show="this.campIndex < 2 && modalShow"
        :title="'next'"
        :onClick="goToSlides"
      >
</OHButton>

【参考方案1】：

定义一个名为delayShow的数据属性，并在created钩子中使用setTimeout函数将其设置为true：

data()
  return
   delayShow:false,
 ...   

 
,
created()
 setTimeout(()=>
  this.delayShow=true;
,2000)

在模板中：

<OHButton
        v-show="delayShow && modalShow"
        :title="'next'"
        @click="goToSlides"
      >
</OHButton>