Момент.js з Vuejs

Я намагаюся роздрукувати час дати, використовуючи, наприклад, наступне в vue-for

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

але, воно не з'являється. Це просто заготовка. Як я можу спробувати використати момент в vue?

За допомогою вашого коду, 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>

[демонстрація]

Якщо ваш проект є додатком на одній сторінці (наприклад, створеним проектом vue init webpack myproject), я вважаю, що цей спосіб є найбільш інтуїтивним та простим:

В main.js

import moment from 'moment'

Vue.prototype.moment = moment

Потім у своєму шаблоні просто використовуйте

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

У своєму 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>

Я змусив його працювати з 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>

Ось приклад використання сторонньої бібліотеки обгортки для Vue, що називається vue-moment.

Крім прив’язки екземпляра Moment до кореневої області Vue, ця бібліотека включає momentі durationфільтри.

Цей приклад включає локалізацію та використовує імпорт модулів ES6, офіційний стандарт замість того, щоб вимагати системи модулів CommonJS.

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" -->

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

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

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

vue-момент

дуже приємний плагін для проекту 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")}}