Vuejs를 사용한 Moment.js

다음과 같이 날짜 시간을 인쇄하려고합니다. 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필터링 이 포함됩니다 .

이 예제는 현지화를 포함하며 NodeJS의 CommonJS 모듈 시스템이 필요로하는 대신 공식 표준 인 ES6 모듈 가져 오기를 사용합니다.

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 });

이제 추가 마크 업없이 Vue 템플릿에서 직접 Moment 인스턴스를 사용할 수 있습니다.

<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 모듈을 가져온 다음 계산 된 함수를 사용하여 moment () 논리를 처리하고 템플릿에서 참조되는 값을 반환합니다.

나는 이것을 사용하지 않았으므로 그 효과에 대해 말할 수는 없지만 대체 고려 사항으로 https://github.com/brockpetrie/vue-moment 를 찾았습니다.

Vue-Moment

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