Vuejs के साथ पल

Question

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

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

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

Answer 1

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

[डेमो]

Comments

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

— पैटी

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

— Paweł Go Pawcicki

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

— Jaroslav Klimčík

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

— जोशफिट

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

— डेव हॉवसन

Answer 2

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

मुख्य में। Js

import moment from 'moment'

Vue.prototype.moment = moment

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

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

Comments

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

— आईएमसीआर

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

— जोश

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

— एल्विन कोंडा

Answer 3

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

Comments

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

— andresgottlieb

Answer 4

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

Comments

क्यों विधि, क्यों गणना नहीं?

— सेरही मातृच्यक

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

— अधिकतम

Answer 5

यहाँ 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" -->

Comments

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

— ओगुज

Answer 6

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

Comments

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

— पेड्रो

Answer 7

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

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

Answer 8

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