web-dev-qa-db-fra.com

Moment.js avec Vuejs

J'essaie d'imprimer la date et l'heure comme ci-dessous dans vue-for

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

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

momentjsvue.js
93
Set Kyar Wa Lar

Avec votre code, le vue.js tente d'accéder à la méthode moment() à partir de sa portée.

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

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

Si vous voulez passer une date au moment.js, je 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]

178
Pantelis Peslis

Si votre projet est une application à une seule page (par exemple, un projet créé par vue init webpack myproject), j'ai trouvé que cette méthode était 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>
104
Geng Jiawen

Dans votre package.json dans la section "dependencies" ajoutez 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>
23
Paweł Gościcki

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

J'aimerais simplement importer le module moment, puis utiliser une fonction calculée pour gérer la logique de moment () et renvoyer une valeur référencée dans le modèle.

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

1
CodeFromthe510
import VueMoment from 'vue-moment';
Vue.use(VueMoment);

const moment = require('moment')
require('moment/locale/es')

Vue.use(require('vue-moment'), {
    moment
})

console.log(Vue.moment().locale()) //es
0
Atchutha rama reddy Karri