Момент.js с Vuejs


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

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

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

4   64   2015-12-16 12:16:27

4 ответа:

С кода 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), Я нашел этот способ наиболее интуитивно понятным и простым:

на главная.js

import moment from 'moment'

Vue.prototype.moment = moment

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

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

в своем package.json на добавить момент:

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

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

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