获取当前年月日、时分秒、星期,并实时更新

需求:获取当前年月日-时分秒-星期几,并实时更新

效果:在这里插入图片描述

实现:先获取当前时间;写一个定时器,每秒刷新一次;时间格式过滤自动补0

data () {
    return {
      date: new Date(), // 获取当前时间
      time: '', // 年月日时分秒
      week: '' // 周
    }
  },
  
created () {
    let vm = this
    vm.timer = setInterval(() => {
      // 年月日时分秒
      let y = new Date().getFullYear()
      let m = vm.appendZero(new Date().getMonth() + 1)
      let d = vm.appendZero(new Date().getDate())
      let ho = vm.appendZero(new Date().getHours())
      let mi = vm.appendZero(new Date().getMinutes())
      let ss = vm.appendZero(new Date().getSeconds())
      // 星期
      let wk = new Date().getDay()
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      vm.week = weeks[wk]
      // 年月日-时分秒
      vm.date = y + '-' + m + '-' + d
      vm.time = ho + ':' + mi + ':' + ss
    }, 1000)
  },
  
  methods:{
    // 时间格式过滤加0
    appendZero (obj) {
      if (obj < 10) {
        return '0' + obj
      } else {
        return obj
      }
    }
}

就实现啦~

你可能感兴趣的:(vue,javascript,前端)