VUE中封装时间组件-笔记

日期封装VUE

1.data定义数据

data () {
  return {
    // 日期
    timedate: '',
    // 时间
    timehour: '',
    // 周
    timeweek: ''
  }
}

2.methods定义函数封装

getTime () {
  let date = new Date()
  // 日期获取
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()
  this.timedate = year + '.' + month + '.' + day
    
  // 时分秒获取
  let hour = date.getHours()
  let minute = date.getMinutes()
  let second = date.getSeconds()
  // 补齐两位数
  if (hour < 10) {
    hour = '0' + hour
  }
  if (minute < 10) {
    minute = '0' + minute
  }
  if (second < 10) {
    second = '0' + second
  }
  this.timehour = hour + ':' + minute + ':' + second
    
  // 周获取
  let week = date.getDay()
  switch (week) {
    case 0:
      week = '周日'
      break
    case 1:
      week = '周一'
      break
    case 2:
      week = '周二'
      break
    case 3:
      week = '周三'
      break
    case 4:
      week = '周四'
      break
    case 5:
      week = '周五'
      break
    case 6:
      week = '周六'
      break
    default:
      break
  }
  this.timeweek = week
}

3.mounted调用，使用setInterval自增秒数

setInterval(() => {
  this.getTime()
}, 1000)