Moment.js dengan Vuejs

Saya mencoba mencetak waktu tanggal menggunakan seperti berikut ini di vue-for

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

tapi, itu tidak muncul. Itu hanya kosong. Bagaimana saya bisa mencoba menggunakan moment in vue?

Dengan kode Anda, vue.jsmencoba mengakses moment()metode dari cakupannya.

Karenanya Anda harus menggunakan metode seperti ini:

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

Jika Anda ingin melewatkan tanggal ke moment.js, saya sarankan untuk menggunakan filter:

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

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

[demo]

Jika proyek Anda adalah aplikasi satu halaman, (misalnya proyek yang dibuat oleh vue init webpack myproject), menurut saya cara ini paling intuitif dan sederhana:

Di main.js

import moment from 'moment'

Vue.prototype.moment = moment

Kemudian di template Anda, cukup gunakan

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

Dalam Anda package.jsondi "dependencies"saat bagian add:

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

Di komponen tempat Anda ingin menggunakan momen, impor:

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

Dan di komponen yang sama tambahkan properti yang dihitung:

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

Dan kemudian di template komponen ini:

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

Saya membuatnya bekerja dengan Vue 2.0 dalam komponen file tunggal.

npm install moment di folder tempat Anda menginstal 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>

Berikut adalah contoh menggunakan pustaka pembungkus pihak ketiga untuk Vue yang dipanggil vue-moment.

Selain mengikat instance Moment ke dalam cakupan root Vue, library ini menyertakan momentdan durationmemfilter.

Contoh ini mencakup pelokalan dan menggunakan impor modul ES6, standar resmi, bukan yang dibutuhkan oleh sistem modul 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 });

Sekarang Anda dapat menggunakan instance Moment langsung di template Vue Anda tanpa markup tambahan:

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

Atau filternya:

<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

Saya cukup mengimpor modul momen, lalu menggunakan fungsi komputasi untuk menangani logika momen () saya dan mengembalikan nilai yang direferensikan di template.

Meskipun saya belum menggunakan ini dan karenanya tidak dapat berbicara tentang efektivitasnya, saya menemukan https://github.com/brockpetrie/vue-moment untuk pertimbangan alternatif

vue-moment

plugin yang sangat bagus untuk proyek vue dan bekerja sangat lancar dengan komponen dan kode yang ada. Nikmati saat-saat ... 😍

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