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

【问题标题】：How to delay a button display to 2s in Vuejs如何在Vuejs中将按钮显示延迟到2s
【发布时间】：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>

【讨论】：