Moment.js mit Vuejs

127

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?

Stellen Sie Kyar Wa Lar ein
quelle

Antworten:

227

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]

Pantelis Peslis
quelle
7
Wenn Sie es6 verwenden, vergessen Sie nicht - importieren Sie Moment von 'Moment';
Patie
2
Filter sind in Vue 2+ deaktiviert. Sie sollten stattdessen eine berechnete Eigenschaft verwenden. Siehe meine Antwort auf diese Frage.
Paweł Gościcki
Für Vue v2 können Sie den globalen Filter vuejs.org/v2/api/#Vue-filter
Jaroslav Klimčík
Schnelle klare Antwort, die in einer Komponente funktioniert. Respekt.
Joshfindit
@ PawełGościcki Sind Sie sicher, dass Filter in Vue2 nicht funktionieren? denn für mich tun sie
Dave Howson
145

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>
Geng Jiawen
quelle
Sollte neben SPAs auch für andere Anwendungstypen funktionieren.
iAmcR
Ich mag diese Methode, Moment zu verwenden, sehr. Danke für das Teilen! Ich habe es gerade implementiert, aber mit einer kleinen Änderung, wie in den Dokumenten vorgeschlagen, Vue.prototype. $ Moment = moment. vuejs.org/v2/cookbook/adding-instance-properties.html .
Josh
Einfach, aber Sie können keine Typerkennung im VS-Code haben.
Alvin Konda
28

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>
Paweł Gościcki
quelle
1
Es ist erwähnenswert, dass Sie anstelle einer Funktion ohne Parameter eine Funktion wie die folgende verwenden möchten: date2day: function (date) {return moment(date).format('dddd')} Sie können sie nicht verwenden computedund sollten sie methodsstattdessen verwenden.
Andresgottlieb
12

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>
max
quelle
Warum Methode, warum nicht berechnet?
Serhii Matrunchyk
Für Anzeigezwecke habe ich die Methode verwendet. Fühlen Sie sich frei, berechnete Eigenschaft zu verwenden.
Max
4

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" -->
Atchutha Rama Reddy Karri
quelle
2
Zu Ihrer Information: Diese Antwort wurde aufgrund ihrer Länge und ihres Inhalts als minderwertig gekennzeichnet. Vielleicht möchten Sie es verbessern, indem Sie erklären, wie dies die Frage von OP beantwortet.
Oguz Ismail
3
// 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
Rinat Sadykov
quelle
Gute Verwendung von Plugins, um momentbezogene Dinge in einer separaten Datei zu isolieren. Funktioniert super!
Pedro
0

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

CodeFromthe510
quelle
0

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")}}
Awais Jameel
quelle