Provo a stampare la data e l'ora usando come segue in vue-for
{{ moment().format('MMMM Do YYYY, h:mm:ss a') }}
ma non appare. È solo uno spazio vuoto. Come posso provare a usare il momento in vue?
Provo a stampare la data e l'ora usando come segue in vue-for
{{ moment().format('MMMM Do YYYY, h:mm:ss a') }}
ma non appare. È solo uno spazio vuoto. Come posso provare a usare il momento in vue?
Risposte:
Con il tuo codice, vue.js
sta tentando di accedere al moment()
metodo dal suo ambito.
Quindi dovresti usare un metodo come questo:
methods: {
moment: function () {
return moment();
}
},
Se vuoi passare una data alla moment.js
, ti consiglio di utilizzare i filtri:
filters: {
moment: function (date) {
return moment(date).format('MMMM Do YYYY, h:mm:ss a');
}
}
<span>{{ date | moment }}</span>
Se il tuo progetto è un'applicazione a pagina singola, (es. Progetto creato da vue init webpack myproject
), ho trovato questo modo più intuitivo e semplice:
In main.js
import moment from 'moment'
Vue.prototype.moment = moment
Quindi nel tuo modello, usa semplicemente
<span>{{moment(date).format('YYYY-MM-DD')}}</span>
Nella tua package.json
nel "dependencies"
momento in cui la sezione add:
"dependencies": {
"moment": "^2.15.2",
...
}
Nel componente in cui desideri utilizzare moment, importalo:
<script>
import moment from 'moment'
...
E nello stesso componente aggiungi una proprietà calcolata:
computed: {
timestamp: function () {
return moment(this.<model>.attributes['created-at']).format('YYYY-MM-DD [at] hh:mm')
}
}
E poi nel modello di questo componente:
<p>{{ timestamp }}</p>
date2day: function (date) {return moment(date).format('dddd')}
Non puoi usare computed
e dovresti usare methods
invece.
L'ho fatto funzionare con Vue 2.0 in un unico componente file.
npm install moment
nella cartella in cui hai installato 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>
Ecco un esempio che utilizza una libreria wrapper di terze parti per Vue chiamata vue-moment
.
Oltre a collegare l'istanza Moment all'ambito radice di Vue, questa libreria include moment
e duration
filtra.
Questo esempio include la localizzazione e utilizza le importazioni di moduli ES6, uno standard ufficiale, invece di quanto richiesto dal sistema di moduli CommonJS di 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 });
Ora puoi utilizzare l'istanza Moment direttamente nei tuoi modelli Vue senza alcun markup aggiuntivo:
<small>Copyright {{ $moment().year() }}</small>
Oppure i filtri:
<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
Importerei semplicemente il modulo moment, quindi utilizzerei una funzione calcolata per gestire la mia logica moment () e restituirei un valore a cui si fa riferimento nel modello.
Anche se non l'ho usato e quindi non posso parlare della sua efficacia, ho trovato https://github.com/brockpetrie/vue-moment per una considerazione alternativa
vue-moment
plugin molto carino per il progetto vue e funziona molto bene con i componenti e il codice esistente. Goditi i momenti ... 😍
// 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")}}