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

นี่คือตัวอย่างการใช้ห้องสมุดของบุคคลที่ 3 เสื้อคลุม Vue vue-momentเรียกว่า

นอกเหนือจากการผูกอินสแตนซ์ Moment เข้ากับขอบเขตรูทของ Vue แล้วไลบรารีนี้ยังรวมmomentและdurationตัวกรอง

ตัวอย่างนี้รวมถึงการแปลเป็นภาษาท้องถิ่นและกำลังใช้การนำเข้าโมดูล ES6 ซึ่งเป็นมาตรฐานอย่างเป็นทางการแทนที่จะต้องใช้ระบบโมดูล 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 });

ตอนนี้คุณสามารถใช้อินสแตนซ์ 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")}}