[Vue.js] 실시간 두자리 시간(시, 분, 초) 표시 - 디지털 시계 | AM, PM 표시 | 날짜(년-월-일) 표시

AM, PM | 시분초 | 연월일

시분초, 년월일은 문자열 타입으로 변경하고 padStart로 2자리로 표시하였다. 시간은 12시간으로 표시되도록 하였다.

export default {
  components: {},
  data() {
    return {
      ampm: '',
      time: '',
      date: ''
    }
  },
  created() {
    setInterval(() => this.getNow(), 1000)
  },
  methods: {
    getNow() {
      const date = new Date()
      // 오전, 오후(AM, PM) 표시
      this.ampm = date.getHours() >= 12 ? 'PM' : 'AM'
      
      // 시분초(00:00:00) 표시
      this.time = `${String(date.getHours() % 12 || 12).padStart(2, '0')}:${String(
        date.getMinutes()
      ).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
      
      // 년월일(yyyy-mm-dd) 표시
      this.date = `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, 0)}-${date.getDate().toString().padStart(2, 0)}`
    }
  }
}