vue 获取当前时间,定时刷新

2020-03-13  本文已影响0人  咸鱼不闲吧

vue 定时刷新 当前时间

<div>{{ currDate }}</div>
data() {
  return {
    timer: '',
    currDate: new Date()
  } 
},
created() {
  const appendZero = (obj) => {
    if (obj < 10) {
      return '0' + obj
    } else {
      return obj
    }
  }
  const getCurrTime = () => {
    this.currDate = 
      new Date().getFullYear() + '年' +
      appendZero(new Date().getMonth() + 1) + '月' + 
      appendZero(new Date().getDate()) + '日'  + 
      appendZero(new Date().getHours()) + ' : ' + 
      appendZero(new Date().getMinutes()) + ': ' + 
      appendZero(new Date().getSeconds())
  }
  getCurrTime();
  this.timer = setInterval(() => {
    getCurrTime();
  }, 1000);
},
beforeDestroy() {
  if(this.timer) {
    clearInterval(this.timer)
  }
}

最终效果

image.png
上一篇下一篇

猜你喜欢

热点阅读