はじめに
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>
最後に
自分が忘れたときようのメモ程度に書いてるので
わかりにくい所は勘弁してください。
要望があればさらに詳しく記載します。