vue如何简单优雅的响应式判断某个时间小于当前时间才显示?

Date()属性不是响应式的,

我页面有一个判断。当前时间大于 某个date字段 才显示某块内容

<div v-if="new Date().getTime()>new Date(user.allowTime).getTime()">
    显示
</div>

如果这样写,就存在一个问题,随着时间的变化,即使当前时间大于了允许显示时间,这个div也不会显示,如何解决这个问题呢?

我现在是使用定时器做了一个数,来监测每秒的变化,然后重新计算,但我觉得这样不优雅。需要增加额外的逻辑,想问问有没有什么更好的方式

有没有什么简单优雅的方式?

阅读 2.9k
评论
    4 个回答

    没办法,如果保持在当前页面,还能根据时间实时变动状态的话,只能写定时器

    <div v-if="now>new Date(user.allowTime).getTime()">
        显示
    </div>
    now = 0;
    
    setTimeout(() => {
        this.show = Date.now()
    })
    评论 赞赏
      996ICU
      • 289
      <div v-if="asd"></div>
      ...
      computed:{
          asd:{
              get(){
                  return new Date().getTime()>new Date(user.allowTime).getTime()
              }
          }
      }
      评论 赞赏
        <div v-if="show"></div>
        const diffTime = (Date.now() - new Date(user.allowTime).getTime()) / 1000
        this.show = diffTime >= 0
        if (!this.show) {
            setTimeout(() => {
                this.show = true    
            }, -diffTime)
        }
        评论 赞赏
          卡迪
          • 1
          • 新人请关照
          评论 赞赏
            撰写回答

            登录后参与交流、获取后续更新提醒