মূহুর্ত.জেস সাথে ভুয়েজস

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

যদি এস 6 ব্যবহার করে না ভুলে যাবেন না - 'মুহুর্ত' থেকে মুহুর্তটি আমদানি করুন;

— পাটি

ফিল্টারগুলি ভ্যু 2+ এ অক্ষম। পরিবর্তে আপনার একটি গণিত সম্পত্তি ব্যবহার করা উচিত। এই প্রশ্নের আমার উত্তর দেখুন।

— পাওয়ে গোসিকি

ভ্যু

— Jaroslav Klimčík

দ্রুত স্পষ্ট উত্তর যা কোনও উপাদানটিতে কাজ করে। সম্মান.

— জোশফিন্ডিট

@ PawełGościcki আপনি কি Vue2 এ ফিল্টার কাজ করছে না সে সম্পর্কে নিশ্চিত? কারণ তারা আমার জন্য

— ডেভ হাওসন

Answer 2

যদি আপনার প্রকল্পটি কোনও একক পৃষ্ঠার অ্যাপ্লিকেশন হয় (উদাহরণস্বরূপ প্রকল্পটি তৈরি করেছে vue init webpack myproject) তবে আমি খুঁজে পেয়েছি যে এটি সবচেয়ে স্বজ্ঞাত এবং সহজ:

ইন main.js

import moment from 'moment'

Vue.prototype.moment = moment

তারপরে আপনার টেমপ্লেটে, সহজভাবে ব্যবহার করুন

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

Comments

এসপিএগুলি বাদ দিয়ে অন্যান্য অ্যাপ্লিকেশন ধরণের জন্যও কাজ করা উচিত।

— আইএএমসিআর

মোমেন্ট ব্যবহারের এই পদ্ধতিটি আমি সত্যিই পছন্দ করি। ভাগ করে নেওয়ার জন্য ধন্যবাদ! আমি সবেমাত্র এটি প্রয়োগ করেছি তবে ডকস, ভ্যু.প্রোটোটাইপ অনুসারে একটি ছোট পরিবর্তন দিয়ে। মুহূর্ত = মুহূর্ত। vuejs.org/v2/cookbook/adding-instance-properties.html ।

— জোশ

সাধারণ তবে আপনার ভিএস কোডে টাইপ স্বীকৃতি থাকতে পারে না।

— অ্যালভিন কোন্ডা

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

আমি এটি একক ফাইলের উপাদানটিতে ভ্যূ ২.০ দিয়ে কাজ করতে পেরেছি।

npm install moment আপনি যে ফোল্ডারটি ইনস্টল করেছেন সেখানে

<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-moment ।

মুহুর্তের দৃষ্টান্তটিকে ভয়ের রুট স্কোপে বাঁধাই করার পাশাপাশি, এই লাইব্রেরিতে অন্তর্ভুক্ত রয়েছে momentএবং durationফিল্টারগুলি।

এই উদাহরণটিতে স্থানীয়করণ অন্তর্ভুক্ত রয়েছে এবং নোডজেএসের কমনজেএস মডিউল সিস্টেমের পরিবর্তে ES6 মডিউল আমদানি ব্যবহার করা হচ্ছে, একটি সরকারী মান।

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

এখন আপনি কোনও অতিরিক্ত মার্কআপ ছাড়াই সরাসরি আপনার ভ্যু টেম্পলেটগুলিতে মুহুর্তের উদাহরণটি ব্যবহার করতে পারেন:

<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

এফওয়াইআই: দৈর্ঘ্য এবং সামগ্রীর কারণে এই উত্তরটি নিম্ন-মানের হিসাবে চিহ্নিত করা হয়েছিল। এটি কীভাবে ওপির প্রশ্নের উত্তর দেয় তা ব্যাখ্যা করে আপনি এটি উন্নত করতে চাইতে পারেন।

— ওগুজ ইসমাইল

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