文字列じゃなくて、実際の日付を反映させていく date-fns

5001 ワード
DateFormat Vue.js Vuetify Vue.js テキストリンク

文字列じゃなくて、実際の日付を反映させていく

前のやつ
https://qiita.com/shoiizuka/items/6f4fa25b23c6f830b3fb

前のやつは文字列だったけど、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インストールしたやつ
日付をうまいこと反映させてくれる、パッケージ
https://date-fns.org/v2.16.1/docs/format

これで、今日の日付が反映された

日付にプラスして時間も追加したい

前にnpmインストールしたやつ
日付をうまいこと反映させてくれる、パッケージ
https://date-fns.org/v2.16.1/docs/format
のドキュメントを見てみると、

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()
  }

日付が細かく入るようになった