문자열이 아닌 실제 날짜를 반영하는 date-fns

문자열이 아닌 실제 날짜를 반영합니다.

이전 녀석
htps : // 코 m/쇼요즈카/있어 ms/6f4후25b23c6f830b3fb

이전 녀석은 문자열이었지만 date-fns를 통해 시계처럼 느껴집니다.

LiveDate.vue

<template>
  <div class="text-subtitle-1 ml-4">
    {{date}}　<!-- 8データの値を反映 -->
  </div>
</template>

<script>
import {format} from 'date-fns' //1日付処理のやつイン。前にnpmでインストールした

export default {
  data(){　//2新しく設定
    return{
      date:'' //3空にしとく
    }
  },
  methods:{
    getDate(){　 //4データに入れる日付はメソッドにする
      this.date = format(new Date(), 'MMM d')　//5thisでdataのdateに今日の日付をいれる
    }
  },
  mounted(){//6リロードしたときに反映させたいので、マウンテッドの中に
    this.getDate()　//7,メソッドを使う
  }
}
</script>

이전에 npm을 설치한 사람
날짜를 잘 반영시켜주는 패키지
h tps : // 굉장히 - fs. rg / v2.16.1 / cs / fur t

이제 오늘의 날짜가 반영되었습니다.

날짜에 더해 시간을 추가하고 싶습니다.

이전에 npm을 설치한 사람
날짜를 잘 반영시켜주는 패키지
h tps : // 굉장히 - fs. rg / v2.16.1 / cs / fur t
의 문서를 보면,

Month (formatting)
M1, 2, ..., 12
Mo 1st, 2nd, ..., 12th
MM 01, 02, ..., 12
MMM Jan, Feb, ..., Dec
MMMM January, February, ..., December ●이것 채용
MMMMM J, F, ..., D

Hour [0-23]

H　0, 1, 2, ..., 23　●이것 채용
Ho　0th, 1st, 2nd, ..., 23rd7
HH 00, 01, 02, ..., 23

Minute
m 0, 1, ..., 59
mo 0th, 1st, ..., 59th7
mm 00, 01, ..., 59 ●이것 채용

Second
s 0, 1, ..., 59
so 0th, 1st, ..., 59th7
ss 00, 01, ..., 59 ●이것 채용

라고 썼기 때문에

LiveDate.vue

  methods:{
    getDate(){
      this.date = format(new Date(), 'MMMM d,H:mm:ss') //１,月時間分秒を表示、コロン区切り

다시로드하면 디스플레이가 전환되지만 설정 시간 초과로 초당 전환됩니다.

LiveDate.vue

  methods:{
    getDate(){
      this.date = format(new Date(), 'MMMM d,H:mm:ss')
      setTimeout(this.getDate,1000)  //2,１秒毎にmountedのgetdateを実行
    }
  },
  mounted(){
    this.getDate()
  }

날짜가 세밀하게 들어왔다.