programing

Vue.js 컴포넌트 내의 모멘트 라이브러리를 사용하는 방법

prostudy 2022. 6. 13. 22:23
반응형

Vue.js 컴포넌트 내의 모멘트 라이브러리를 사용하는 방법

끝나고,yarn add moment

난 노력했어...

import moment from 'moment'
Vue.prototype.moment = moment

&

import moment from 'moment'
Vue.use(moment)

&

var moment = require('moment');
Vue.use(moment)

아무 것도 잘 안 돼요.온갖 이상한 에러 메세지가 뜬다!

Vue.js 2에서 모멘트 라이브러리를 사용하는 방법을 알 수 있습니까?

드디어 성공했어!

불러moment()컴포넌트 내부에서methods차단합니다.

사용 예:-

<template>
<v-ons-page>
  <p>{{isToday("12-02-1980")}}</p>
</v-ons-page>
</template>

<script>
import moment from 'moment'

export default {
methods: {
        isToday(date) {
            return moment(date).isSame(moment().clone().startOf('day'), 'd');
        },
    }
}
</script>

저는 TypeScript를 사용할 때,

*을(를) 'make'에서 순간적으로 Import합니다.

샘플:

<template>
<div id="sample">
    <span>{{ formatDate("11-11-2011") }}</span>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator'
import * as moment from 'moment'

@Component()
export default class Sample extends Vue {

    formatDate(d) : string {
        return moment(d).format("MMM Do YYYY");
    }
}
</script>

모든 vue 컴포넌트에 Moment를 Import하고 싶지 않았기 때문에 다음 기사에 설명되어 있는 접근방식을 채택했습니다.https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/

import Moment from 'moment';
Moment.locale( 'de' );
Object.defineProperty( Vue.prototype, '$moment', { value: Moment });

이제 컴포넌트에서 모멘트를 사용할 수 있습니다.

   methods : {

        date : function( timestamp ) {

            return this.$moment( timestamp ).format( 'LLL' );

        }

    }

언급URL : https://stackoverflow.com/questions/45609012/how-to-use-moment-library-inside-a-vue-js-component

반응형