vue实时获取当前时间

data 添加参数

data() {
    return {
      nowDate: '',
      nowTime: '',
      nowWeek: '',
    }
  },

mounted 添加方法

this.currentTime()

methods 调用方法

currentTime() {
      setInterval(this.formatDate, 500);
    },
formatDate() {
      //获取当前时间并打印
      let myDate = new Date()
      let wk = myDate.getDay()
      let yy = String(myDate.getFullYear())
      let mm = myDate.getMonth() + 1
      let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate())
      let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours())
      let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes())
      let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds())
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let week = weeks[wk]
      this.nowDate = yy + ' 年 ' + mm + ' 月 ' + dd + ' 日'
      this.nowTime = hou + ' : ' + min + ' : ' + sec
      this.nowWeek = week
    }

销毁定时任务

// 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前,清除时间定时器
    }
  }

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐