Moment.js mit Vuejs

Ich versuche, Datum und Uhrzeit wie folgt auszudrucken vue-for

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

aber es erscheint nicht. Es ist nur ein Leerzeichen. Wie kann ich versuchen, Moment in Vue zu nutzen?

Mit Ihrem Code vue.jsversucht der moment(), von seinem Umfang aus auf die Methode zuzugreifen .

Daher sollten Sie eine Methode wie die folgende verwenden:

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

Wenn Sie ein Datum an das übergeben möchten moment.js, empfehle ich die Verwendung von Filtern:

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

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

[Demo]

Wenn es sich bei Ihrem Projekt um eine einseitige Anwendung handelt (z. B. ein von erstelltes Projekt vue init webpack myproject), ist dieser Weg am intuitivsten und einfachsten:

In main.js

import moment from 'moment'

Vue.prototype.moment = moment

Dann einfach in Ihrer Vorlage verwenden

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

Fügen Sie package.jsonin Ihrem "dependencies"Abschnitt Moment hinzu:

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

Importieren Sie die Komponente in die Komponente, in der Sie moment verwenden möchten:

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

Fügen Sie in derselben Komponente eine berechnete Eigenschaft hinzu:

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

Und dann in der Vorlage dieser Komponente:

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

Ich habe es mit Vue 2.0 in einer einzelnen Dateikomponente zum Laufen gebracht.

npm install moment in einem Ordner, in dem Sie vue installiert haben

<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>

Hier ist ein Beispiel für die Verwendung einer Wrapper-Bibliothek eines Drittanbieters für Vue vue-moment.

Zusätzlich Moment Instanz in Vue des Stammbereich auf die Bindung, diese Bibliothek enthält momentund durationFilter.

Dieses Beispiel enthält die Lokalisierung und verwendet ES6-Modulimporte, einen offiziellen Standard, anstelle des CommonJS-Modulsystems von NodeJS.

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

Jetzt können Sie die Moment-Instanz direkt in Ihren Vue-Vorlagen ohne zusätzliches Markup verwenden:

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

Oder die Filter:

<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

Ich würde einfach das Moment-Modul importieren, dann eine berechnete Funktion verwenden, um meine moment () -Logik zu verarbeiten und einen Wert zurückzugeben, auf den in der Vorlage verwiesen wird.

Obwohl ich dies nicht verwendet habe und daher nicht über seine Wirksamkeit sprechen kann, habe ich https://github.com/brockpetrie/vue-moment für eine alternative Überlegung gefunden

vue-moment

Sehr schönes Plugin für Vue-Projekt und funktioniert sehr reibungslos mit den Komponenten und dem vorhandenen Code. Genieße die Momente ... 😍

// 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")}}