Khoảnh khắc với Vuejs

Tôi cố gắng in ra ngày giờ bằng cách sử dụng như sau trong vue-for

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

Nhưng, nó không xuất hiện. Nó chỉ là một khoảng trống. Làm thế nào tôi có thể cố gắng sử dụng khoảnh khắc trong vue?

Với mã của bạn, họ vue.jsđang cố gắng truy cập moment()phương thức từ phạm vi của nó.

Do đó bạn nên sử dụng một phương pháp như thế này:

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

Nếu bạn muốn chuyển một ngày cho moment.js, tôi khuyên bạn nên sử dụng các bộ lọc:

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

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

[bản giới thiệu]

Nếu dự án của bạn là một ứng dụng trang đơn, (ví dụ: dự án được tạo bởi vue init webpack myproject), tôi thấy cách này là trực quan và đơn giản nhất:

Trong main.js

import moment from 'moment'

Vue.prototype.moment = moment

Sau đó, trong mẫu của bạn, chỉ cần sử dụng

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

Trong phần của bạn package.jsontrong "dependencies"phần thêm khoảnh khắc:

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

Trong thành phần mà bạn muốn sử dụng khoảnh khắc, hãy nhập nó:

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

Và trong cùng một thành phần, thêm một thuộc tính được tính toán:

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

Và sau đó trong mẫu của thành phần này:

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

Tôi đã làm cho nó hoạt động với Vue 2.0 trong thành phần tệp duy nhất.

npm install moment trong thư mục bạn đã cài đặt 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>

Dưới đây là một ví dụ sử dụng thư viện trình bao bọc của bên thứ 3 cho Vue được gọi vue-moment .

Ngoài ràng buộc đối tượng Moment vào phạm vi gốc của Vue, thư viện này bao gồm momentvà durationcác bộ lọc.

Ví dụ này bao gồm nội địa hóa và đang sử dụng nhập mô-đun ES6, một tiêu chuẩn chính thức, thay vì hệ thống mô-đun CommonJS của NodeJS yêu cầu.

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

Bây giờ bạn có thể sử dụng phiên bản Moment trực tiếp trong các mẫu Vue của mình mà không cần thêm bất kỳ đánh dấu nào:

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

Hoặc các bộ lọc:

<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

Tôi chỉ cần nhập mô-đun khoảnh khắc, sau đó sử dụng hàm được tính toán để xử lý logic khoảnh khắc () của tôi và trả về giá trị được tham chiếu trong mẫu.

Mặc dù tôi chưa sử dụng điều này và do đó không thể nói về hiệu quả của nó, tôi đã tìm thấy https://github.com/brockpetrie/vue-moment để xem xét thay thế

khoảnh khắc

plugin rất đẹp cho dự án vue và hoạt động rất trơn tru với các thành phần và mã hiện có. Tận hưởng những khoảnh khắc ... 😍

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