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

Question

我有一个按钮组件，我在几个地方使用。但我想在特定的页面上显示2s后的按钮，如何在VuejsCSS中实现？

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