Moment.js 和 Vuejs

我试图打印出日期时间使用像下面的 vue-for

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

但是，它并没有出现。它只是一片空白。我怎样才能尝试使用在价值的瞬间？

237677 次浏览
小开
最佳答案

使用您的代码，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>

[演示]

小开

在你的 package.json中，在 "dependencies"部分加上一个瞬间:

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

在您想要使用 moment 的组件中，导入它:

<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>
小开

我让它在单文件组件中与 Vue 2.0一起工作。

安装了 vue 的文件夹中的 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>
小开

如果您的项目是一个单页应用程序，(例如由 vue init webpack myproject创建的项目) , 我发现这种方法是最直观和简单的:

在 主要的

import moment from 'moment'


Vue.prototype.moment = moment

然后在您的模板中，简单地使用

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

我只需要导入 moment 模块，然后使用计算函数来处理 moment ()逻辑，并返回模板中引用的值。

虽然我没有使用这个，因此不能说它的有效性，我确实找到了 https://github.com/brockpetrie/vue-moment作为一个替代的考虑

小开

下面是一个为 Vue 使用名为 vue-moment的第三方包装器库的示例。

除了将 Moment 实例绑定到 Vue 的根作用域之外，这个库还包括 moment和 duration过滤器。

这个示例包括本地化，并使用 ES6模块导入(官方标准) ，而不是 NodeJS 的 CommonJS 模块系统所需的。

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 模板中使用 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" -->
小开

重要时刻

非常好的插件的价值项目和工作非常顺利的组件和现有的代码。 享受这一刻。

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

测试过

import Vue from 'vue'
    

Vue.filter('formatYear', (value) => {
if (!value) return ''
return moment(value).format('YYYY')
})
小开

目前为止，在 Vue 3

npm install moment --save

然后在任何组成部分

import moment from 'moment'


...


export default {
created: function () {
this.moment = moment;
},


...


<div class="comment-line">
\{\{moment(new Date()).format('DD.MM.YYYY [&nbsp;] HH:mm')}}
</div>
小开

在 <template>的作用域中，缺省情况下 global成员不可用。但是您可以使用 computed属性轻松地将它们传递下去。

computed: {
moment: () => moment,
console: () => console,
window: () => window
}

现在您可以在模板中使用它们中的任何一个，即: console.log(moment(), window)。

注意，这不会增加任何开销。

小开

Moment.js 和 Vue3 js

npm install moment --save   # npm
yarn add moment             # yarn

美因茨

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'


import moment from 'moment'


const app = createApp(App)


app.config.globalProperties.$moment = moment


app.use(router).mount('#app')

Vue3 js 组件中使用的矩

\{\{ $moment(item.created_at).format("YYYY-MM-DD") }}  // 2021-07-03
小开

我已经阅读了这里发布的解决方案，它似乎比我的解决方案更复杂，所以我提出这一个，我所做的是这样的

你需要的是:

import moment from 'moment';
...
data() {
return {
moment: moment, // This is the one line of code that you need
}
}

原来是这样

HTML (现在可以工作了) :

<h1>\{\{moment().format('MMMM Do YYYY, h:mm:ss a')}}</h1>

约翰逊:

import moment from 'moment';


export default {
data() {
return {
moment: moment, // This is the one line of code that you need
}
}
}

提交答案