Vuejs के साथ पल


128

मैं निम्नलिखित की तरह उपयोग करके तारीख का समय प्रिंट करने की कोशिश करता हूं vue-for

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

लेकिन, यह दिखाई नहीं देता है। यह सिर्फ एक कोरा है। मैं कैसे व्रत में पल का उपयोग करने की कोशिश कर सकता हूं?

जवाबों:


229

आपके कोड के साथ, विधि को इसके दायरे से 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>

[डेमो]


7
अगर es6 का उपयोग कर, मत भूलना - 'पल' से आयात पल;
पैटी

2
Vue 2+ में फ़िल्टर अक्षम हैं। आपको इसके बजाय एक गणना की गई संपत्ति का उपयोग करना चाहिए। मेरे इस सवाल का जवाब देखिए।
Paweł Go Pawcicki

Vue v2 के लिए आप वैश्विक फ़िल्टर vuejs.org/v2/api/#Vue-filter
Jaroslav Klimčík

एक घटक में काम करने वाले त्वरित स्पष्ट उत्तर। आदर करना।
जोशफिट

@ PawełGo Pawcicki क्या आप Vue2 में काम नहीं कर रहे फिल्टर के बारे में निश्चित हैं? क्योंकि मेरे लिए वे करते हैं
डेव हॉवसन

145

यदि आपकी परियोजना एक एकल पृष्ठ अनुप्रयोग है, (जैसे परियोजना द्वारा बनाई गई vue init webpack myproject), तो मैंने पाया कि यह तरीका सबसे सहज और सरल है:

मुख्य में। Js

import moment from 'moment'

Vue.prototype.moment = moment

फिर अपने टेम्पलेट में, बस उपयोग करें

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

एसपीए से अलग अन्य प्रकार के आवेदन के लिए भी काम करना चाहिए।
आईएमसीआर

मुझे मोमेंट के इस्तेमाल का यह तरीका बहुत पसंद है। साझा करने के लिए धन्यवाद! मैंने अभी इसे लागू किया है लेकिन डॉक्स में सुझाए गए एक छोटे से बदलाव के साथ, Vue.prototype। $ पल = पल। vuejs.org/v2/cookbook/adding-instance-properties.html
जोश

सरल लेकिन आपके पास VS कोड में टाइप की मान्यता नहीं हो सकती है।
एल्विन कोंडा

28

अपने में 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>

1
यह ध्यान देने योग्य है कि यदि, पैरामीटर-कम फ़ंक्शन का उपयोग करने के बजाय, आप एक फ़ंक्शन का उपयोग करना चाहते हैं जैसे: date2day: function (date) {return moment(date).format('dddd')} आप उपयोग नहीं कर सकते हैं computed, और methodsइसके बजाय उपयोग करना चाहिए ।
andresgottlieb

13

मैंने इसे एकल फ़ाइल घटक में 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>

क्यों विधि, क्यों गणना नहीं?
सेरही मातृच्यक

प्रदर्शन उद्देश्यों के लिए, मैंने विधि का उपयोग किया। गणना की गई संपत्ति का उपयोग करने के लिए स्वतंत्र महसूस करें।
अधिकतम

4

यहाँ Vue के लिए 3rd पार्टी रैपर लाइब्रेरी का उपयोग करके एक उदाहरण दिया गया है vue-moment

Vue के रूट दायरे में पल उदाहरण बंधन के अलावा, इस पुस्तकालय भी शामिल है momentऔर durationफिल्टर।

इस उदाहरण में स्थानीयकरण शामिल है और ईएस 6 मॉड्यूल आयात का उपयोग कर रहा है, जो कि एनओडीजेएस के कॉमनजस मॉड्यूल सिस्टम की आवश्यकता के बजाय एक आधिकारिक मानक है।

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 टेम्प्लेट में मोमेंट इंस्टेंस का उपयोग कर सकते हैं:

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

या फिल्टर:

<span>{{ 3600000 | duration('humanize') }}</span>
<!-- "an hour" -->
<span>{{ [2, 'years'] | duration('add', 1, 'year') | duration('humanize') }}</span>
<!-- "3 years" -->

2
FYI करें: यह उत्तर इसकी लंबाई और सामग्री के कारण निम्न-गुणवत्ता के रूप में चिह्नित किया गया था। आप यह बताकर सुधार करना चाह सकते हैं कि यह ओपी के प्रश्न का उत्तर कैसे देता है।
ओगुज

3
// 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

अलग-अलग फ़ाइल में पल-संबंधित सामान को अलग करने के लिए प्लगइन्स का अच्छा उपयोग। बहुत अच्छा काम करता है!
पेड्रो

0

मैं बस पल मॉड्यूल आयात करूँगा, फिर मेरे पल () तर्क को संभालने के लिए एक गणना फ़ंक्शन का उपयोग करें और टेम्पलेट में संदर्भित मान लौटाएं।

जबकि मैंने इसका उपयोग नहीं किया है और इस प्रकार यह प्रभावोत्पादकता पर बात नहीं कर सकता है, मैंने एक वैकल्पिक विचार के लिए https://github.com/brockpetrie/vue-moment पाया।


0

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")}}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.