Posted: 2017.04.11 / Category: javascript / Tag: Vue

JavaScriptで日付の表示に便利な Moment.js というライブラリがありますが、これを Vue.js で使用する方法をご紹介します。

Moment.jsをインストール

npm でインストールする場合は次のようになります。

npm install moment -S

使い方

基本的な使い方は, momenの引数にdateを入れて、formatに日付フォーマットを指定するだけです。

// 2017/04/10 23:10
moment(new Date).format('YYYY/MM/DD HH:mm');

fromNow で何日前みたいな表示も簡単ですね。

// 3日前
moment.lang('ja');
moment('2017/04/07 23:10').fromNow();

Vue.jsで使う

今回はitemsデータの中のcreated_atに日付フォーマットを適用するということを想定してやってみます。
template で created_at に moment というフィルタを指定します。

<template>
<ul v-for="item in items">
	<li>{{ item.created_at | moment }}</li>
</ul>
</template>

あとは filters に先ほどの処理を行えば日付フォーマットが適用されます。

<script>
import moment from 'moment';
export default {
	filters: {
		moment: function (date) {
			return moment(date).format('YYYY/MM/DD HH:mm');
		}
	}
}
</script>

Moment.js の詳しい使い方は下記を参考にしてください。

Moment.js