Vue3 day.js で <template>内で日付のformat

4298 ワード
Vue.js Vue3 初心者 dayjs JavaScript JavaScript テキストリンク

はじめに

laravelとvueでの開発において
v-forで回して習得した
日付データにformatをかける方法をメモしておきます。

日付操作はday.jsを使用しています
Moment.jsが主流だと思いますが　day.jsが日付操作系では、一番軽いので使用しています。

準備

$ npm install dayjs --save

day.jsをインストールします

<script>
import dayjs from "dayjs";
dayjs.locale("ja");
</script>

importしてあげます。
日本語利用するので
dayjs.locale("ja");も記載しましょう。

使用する

コントローラーからuserlistという配列を持ってくると仮定して
created_atをYYYY-MM-DDの形にしたいという場合は　下記のように書けばできます

<template>
          <div v-for="index of userlists" :key="index">
              <h2>
                {{ index.last_name }} {{ index.first_name }}
              </h2>
              <div>
                {{ format(index.created_at) }}
              </div>
          </div>
</template>

<script>
import dayjs from "dayjs";
dayjs.locale("ja");

export default {
  props: {
    userlists: Array,
  },

  methods: {
    format(date) {
      let created_at = dayjs(date).format(YYYY--MM-DD");
      return created_at;
    },
  },
};
</script>

最後に

自分が忘れたときようのメモ程度に書いてるので
わかりにくい所は勘弁してください。

要望があればさらに詳しく記載します。

HTML携帯端末画面対応
3Sum