Moment.js avec Vuejs

J'essaye d'imprimer l'heure de la date en utilisant comme suit dans vue-for

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

mais, cela n'apparaît pas. C'est juste un blanc. Comment puis-je essayer d'utiliser le moment en vue?

Avec votre code, le vue.jstente d'accéder à la moment()méthode depuis sa portée.

Par conséquent, vous devez utiliser une méthode comme celle-ci:

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

Si vous souhaitez passer une date au moment.js, je vous suggère d'utiliser des filtres:

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

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

[démo]

Si votre projet est une application sur une seule page (par exemple, un projet créé par vue init webpack myproject), j'ai trouvé que cette méthode est la plus intuitive et la plus simple:

Dans main.js

import moment from 'moment'

Vue.prototype.moment = moment

Ensuite, dans votre modèle, utilisez simplement

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

Dans votre package.jsondans la "dependencies"section ajouter un moment:

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

Dans le composant où vous souhaitez utiliser moment, importez-le:

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

Et dans le même composant, ajoutez une propriété calculée:

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

Et puis dans le modèle de ce composant:

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

Je l'ai fait fonctionner avec Vue 2.0 en composant de fichier unique.

npm install moment dans le dossier où vous avez installé 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>

Voici un exemple utilisant une bibliothèque de wrapper tierce pour Vue appelée vue-moment.

En plus de lier l'instance Moment dans la portée racine de Vue, cette bibliothèque inclut momentet durationfiltre.

Cet exemple inclut la localisation et utilise les importations de modules ES6, une norme officielle, au lieu des exigences du système de modules CommonJS de 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 });

Vous pouvez maintenant utiliser l'instance Moment directement dans vos modèles Vue sans aucun balisage supplémentaire:

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

Ou les filtres:

<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

J'importerais simplement le module moment, puis utiliserais une fonction calculée pour gérer ma logique moment () et retournerais une valeur référencée dans le modèle.

Bien que je ne l'ai pas utilisé et que je ne puisse donc pas parler de son efficacité, j'ai trouvé https://github.com/brockpetrie/vue-moment pour une autre considération

vue-moment

très beau plugin pour le projet vue et fonctionne très bien avec les composants et le code existant. Profitez des moments ... 😍

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