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

Question

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

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

Answer 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>