Moment.js com Vuejs

127

Eu tento imprimir a data e hora usando o seguinte em vue-for

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

mas, não aparece. É apenas um espaço em branco. Como posso tentar usar o momento no vue?

Set Kyar Wa Lar
fonte

Respostas:

228

Com seu código, o vue.jsestá tentando acessar o moment()método a partir do seu escopo.

Portanto, você deve usar um método como este:

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

Se você deseja passar uma data para moment.js, sugiro usar filtros:

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

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

[demo]

Pantelis Peslis
fonte
7
se estiver usando es6, não esqueça - importe o momento de 'moment';
31816
2
Os filtros estão desativados no Vue 2+. Você deve usar uma propriedade computada. Veja minha resposta a esta pergunta.
Paweł Gościcki 5/11
No Vue v2, você pode usar o filtro global vuejs.org/v2/api/#Vue-filter
Jaroslav Klimčík
Resposta rápida e clara que funciona em um componente. Respeito.
joshfindit
@ PawełGościcki você tem certeza de que os filtros não estão funcionando no Vue2? porque para mim eles fazem
Dave Howson
145

Se o seu projeto for um aplicativo de página única (por exemplo, projeto criado por vue init webpack myproject ), achei desta maneira mais intuitiva e simples:

No main.js

import moment from 'moment'

Vue.prototype.moment = moment

Em seguida, no seu modelo, basta usar

<span>{{moment(date).format('YYYY-MM-DD')}}</span>
Geng Jiawen
fonte
Também deve funcionar para outros tipos de aplicativos, além dos SPAs.
iAmcR 21/07
Eu realmente gosto desse método de usar o Moment. Obrigado por compartilhar! Acabei de implementar, mas com uma pequena alteração, conforme sugerido nos documentos, Vue.prototype. $ Moment = moment. vuejs.org/v2/cookbook/adding-instance-properties.html .
Josh
Simples, mas você não pode ter reconhecimento de tipo no código VS.
Alvin Konda
28

No seu package.jsonna "dependencies"seção adicione momento:

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

No componente em que você gostaria de usar o momento, importe-o:

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

E no mesmo componente, adicione uma propriedade computada:

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

E então no modelo deste componente:

<p>{{ timestamp }}</p>
Paweł Gościcki
fonte
1
Vale a pena notar que se, em vez de usar uma função sem parâmetro, você deseja usar uma função como: date2day: function (date) {return moment(date).format('dddd')} Você não pode usar computede deve usá-lo methods.
precisa saber é o seguinte
12

Eu fiz funcionar com o Vue 2.0 no componente de arquivo único.

npm install moment na pasta onde você instalou o 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>
max
fonte
Por que método, por que não computado?
Serhii Matrunchyk
Para fins de exibição, usei o método Sinta-se livre para usar a propriedade computada.
max
4

Aqui está um exemplo usando uma biblioteca de wrapper de terceiros para o Vue chamada vue-moment .

Além de vincular a instância do Moment ao escopo raiz do Vue, esta biblioteca inclui momente durationfiltra.

Este exemplo inclui localização e está usando importações do módulo ES6, um padrão oficial, em vez do sistema do módulo CommonJS do 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 });

Agora você pode usar a instância Moment diretamente nos seus modelos do Vue sem nenhuma marcação adicional:

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

Ou os filtros:

<span>{{ 3600000 | duration('humanize') }}</span>
<!-- "an hour" -->
<span>{{ [2, 'years'] | duration('add', 1, 'year') | duration('humanize') }}</span>
<!-- "3 years" -->
Atchutha rama reddy Karri
fonte
2
FYI: Esta resposta foi sinalizada como de baixa qualidade devido ao seu tamanho e conteúdo. Você pode aprimorá-lo explicando como isso responde à pergunta do OP.
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
fonte
Bom uso de plugins para isolar coisas relacionadas a momentos em um arquivo separado. Funciona bem!
Pedro
0

Eu simplesmente importaria o módulo moment, então usaria uma função computada para manipular minha lógica moment () e retornar um valor referenciado no modelo.

Embora eu não tenha usado isso e, portanto, não possa falar sobre sua eficácia, encontrei https://github.com/brockpetrie/vue-moment para uma consideração alternativa

CodeFromthe510
fonte
0

momento-momento

plugin muito bom para o projeto vue e funciona muito bem com os componentes e o código existente. Aproveite os momentos ... 😍

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