使用vue js实现实时时钟

Question

我为我的一个项目编写了一个小时钟组件，但我没有刷新时钟的值。

我的代码的简短摘录：

    time() {
      let now = new Date();
      let hour = this.zeroPadding(now.getHours());
      let minute = this.zeroPadding(now.getMinutes());
      let second = this.zeroPadding(now.getSeconds());

      console.log(hour.toString() + minute.toString() + second.toString())
      if(!this.realtime)
        return this.value
      else
        return hour.toString() + ":" + minute.toString() + ":" + second.toString()
    }
  },
  mounted() {
    setInterval(() => {
        this.time()
    }, 1000)
  },
  beforeDestroy () {
    clearInterval(this.polling)
  }

有人发现错误吗？我对民意调查的理解有误吗？

问候，马蒂亚斯

Answer 1

您想要显示的时间值需要是一个数据/计算属性，以便它是反应性的并且 Vue 可以跟踪它。简洁的方法：

export default {
  data() {
    return {
      interval: null,
      time: null
    }
  },
  beforeDestroy() {
    // prevent memory leak
    clearInterval(this.interval)
  },
  created() {
    // update the time every second
    this.interval = setInterval(() => {
      // Concise way to format time according to system locale.
      // In my case this returns "3:48:00 am"
      this.time = Intl.DateTimeFormat(navigator.language, {
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric'
      }).format()
    }, 1000)
  }
}