Moment.jsとVuejs

次のようにして日付時刻を印刷してみます vue-for

{{ moment().format('MMMM Do YYYY, h:mm:ss a') }}

ただし、表示されません。それはただの空白です。Vueでモーメントを使用する方法を教えてください。

あなたのコードでは、vue.jsはmoment()そのスコープからメソッドにアクセスしようとしています。

したがって、次のような方法を使用する必要があります。

methods: {
  moment: function () {
    return moment();
  }
},

に日付を渡したい場合はmoment.js、フィルターを使用することをお勧めします。

filters: {
  moment: function (date) {
    return moment(date).format('MMMM Do YYYY, h:mm:ss a');
  }
}

<span>{{ date | moment }}</span>

[デモ]

プロジェクトが単一ページアプリケーションの場合（例：によって作成されたプロジェクトvue init webpack myproject）、この方法が最も直感的でシンプルであることがわかりました。

ではmain.js

import moment from 'moment'

Vue.prototype.moment = moment

次に、テンプレートで単純に使用します

<span>{{moment(date).format('YYYY-MM-DD')}}</span>

セクションにあなたの瞬間を追加package.jsonしてください"dependencies"：

"dependencies": {
  "moment": "^2.15.2",
  ...
}

モーメントを使用するコンポーネントで、インポートします。

<script>
import moment from 'moment'
...

そして、同じコンポーネントに計算されたプロパティを追加します：

computed: {
  timestamp: function () {
    return moment(this.<model>.attributes['created-at']).format('YYYY-MM-DD [at] hh:mm')
  }
}

そして、このコンポーネントのテンプレートで：

<p>{{ timestamp }}</p>

私はそれを単一のファイルコンポーネントでVue 2.0で動作させました。

npm install moment Vueがインストールされているフォルダー

<template>
  <div v-for="meta in order.meta">
    {{ getHumanDate(meta.value.date) }}
  </div>
</template>
<script>
    import moment from 'moment';
    export default {
         methods: {
            getHumanDate : function (date) {
                return moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY');
            }
        }
    }
</script>

以下は、Vueのサードパーティラッパーライブラリを使用した例です。 vue-momentです。

MomentインスタンスをVueのルートスコープにバインドすることに加えて、このライブラリにはmomentとdurationフィルターが含まれています。

この例にはローカリゼーションが含まれており、NodeJSのCommonJSモジュールシステムが必要とする代わりに、ES6モジュールインポート（公式標準）を使用しています。

import Vue from 'vue';

import moment from 'moment';
import VueMoment from 'vue-moment';

// Load Locales ('en' comes loaded by default)
require('moment/locale/es');

// Choose Locale
moment.locale('es');

Vue.use(VueMoment, { moment });

これで、追加のマークアップなしで、MomentインスタンスをVueテンプレートで直接使用できます。

<small>Copyright {{ $moment().year() }}</small>

またはフィルター：

<span>{{ 3600000 | duration('humanize') }}</span>
<!-- "an hour" -->
<span>{{ [2, 'years'] | duration('add', 1, 'year') | duration('humanize') }}</span>
<!-- "3 years" -->

// plugins/moment.js

import moment from 'moment';

moment.locale('ru');

export default function install (Vue) {
  Object.defineProperties(Vue.prototype, {
    $moment: {
      get () {
        return moment;
      }
    }
  })
}

// main.js

import moment from './plugins/moment.js';
Vue.use(moment);

// use this.$moment in your components

単にモーメントモジュールをインポートしてから、計算された関数を使用して私のmoment（）ロジックを処理し、テンプレートで参照されている値を返します。

私はこれを使用していないため、その効果について話すことはできませんが、別の考慮事項としてhttps://github.com/brockpetrie/vue-momentを見つけました

瞬間

vueプロジェクト用の非常に優れたプラグインであり、コンポーネントや既存のコードと非常にスムーズに連携します。瞬間をお楽しみください...😍

// in your main.js
Vue.use(require('vue-moment'));
// and use in component
{{'2019-10-03 14:02:22' | moment("calendar")}}
// or like this
{{created_at | moment("calendar")}}