Moment.js с Vuejs


128

Я пытаюсь распечатать дату и время, используя следующее в vue-for

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

но это не появляется. Это просто пустое место. Как я могу попробовать использовать момент во vue?

Ответы:


229

С вашим кодом vue.jsпытается получить доступ к moment()методу из своей области.

Следовательно, вы должны использовать такой метод:

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

Если вы хотите передать дату в moment.js, я предлагаю использовать фильтры:

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

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

[Демо]


7
при использовании es6 не забывайте - импортировать момент из 'moment';
Patie

2
Фильтры отключены в Vue 2+. Вместо этого вам следует использовать вычисляемое свойство. Смотрите мой ответ на этот вопрос.
Paweł Gościcki

Для Vue v2 вы можете использовать глобальный фильтр vuejs.org/v2/api/#Vue-filter
Ярослав

Быстрый четкий ответ, работающий в компоненте. Респект.
joshfindit

@ PawełGościcki, вы уверены, что фильтры не работают в Vue2? потому что для меня они есть
Дэйв Хоусон

145

Если ваш проект представляет собой одностраничное приложение (например, проект, созданный vue init webpack myproject), я обнаружил, что этот способ наиболее интуитивно понятен и прост:

В main.js

import moment from 'moment'

Vue.prototype.moment = moment

Затем в вашем шаблоне просто используйте

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

Должен также работать для других типов приложений, помимо SPA.
iAmcR,

Мне очень нравится этот способ использования Moment. Спасибо, что поделился! Я только что реализовал его, но с небольшими изменениями, предложенными в документации, Vue.prototype. $ Moment = moment. vuejs.org/v2/cookbook/adding-instance-properties.html .
Джош

Просто, но у вас не может быть распознавания типов в коде VS.
Элвин Конда,

28

В свой package.jsonв "dependencies"разделе добавить момент:

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

Импортируйте его в компонент, в котором вы хотите использовать момент:

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

И в том же компоненте добавьте вычисляемое свойство:

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

А потом в шаблоне этого компонента:

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

1
Стоит отметить, что если вместо использования функции без параметров вы хотите использовать такую ​​функцию, как: date2day: function (date) {return moment(date).format('dddd')} Вы не можете использовать computed, а должны использовать methodsвместо нее.
andresgottlieb

13

Я заставил его работать с Vue 2.0 в однофайловом компоненте.

npm install moment в папке, где у вас установлен 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

4

Вот пример использования сторонней библиотеки-оболочки для Vue с именем vue-moment.

Помимо привязки экземпляра Moment к корневой области видимости Vue, эта библиотека включает momentи durationфильтрует.

Этот пример включает локализацию и использует импорт модулей ES6, официальный стандарт, вместо того, что требует система модулей CommonJS 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 });

Теперь вы можете использовать экземпляр Moment непосредственно в своих шаблонах Vue без дополнительной разметки:

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

Или фильтры:

<span>{{ 3600000 | duration('humanize') }}</span>
<!-- "an hour" -->
<span>{{ [2, 'years'] | duration('add', 1, 'year') | duration('humanize') }}</span>
<!-- "3 years" -->

2
К вашему сведению: этот ответ был отмечен как некачественный из-за его длины и содержания. Вы можете улучшить его, объяснив, как это отвечает на вопрос OP.
огуз

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

Хорошее использование плагинов для выделения материалов, связанных с моментами, в отдельный файл. Прекрасно работает!
Педро

0

Я просто импортирую модуль момента, а затем использую вычисляемую функцию для обработки моей логики moment () и возвращаю значение, указанное в шаблоне.

Хотя я не использовал это и поэтому не могу говорить об его эффективности, я нашел https://github.com/brockpetrie/vue-moment для альтернативного рассмотрения


0

вя-момент

очень хороший плагин для проекта vue и очень плавно работает с компонентами и существующим кодом. Наслаждайтесь моментами ... 😍

// 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")}}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.