Moment.js 使用 Vuejs

Question

我尝试在 vue-for

中使用如下所示打印日期时间

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

但是，它并没有出现。这只是一个空白。我如何尝试在 vue 中使用 moment？

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>

[demo]

Answer 2

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

Answer 3

我让它在单个文件组件中与 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>

Answer 4

如果您的项目是单页应用程序（例如 vue init webpack myproject 创建的项目），我发现这种方式是最直观和简单的：

在main.js

import moment from 'moment'

Vue.prototype.moment = moment

然后在您的模板中，只需使用

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

Answer 5

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

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

Answer 6

这是一个使用 Vue 的第 3 方包装器库的示例，名为 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" -->

Answer 7

vue-moment

非常适合 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")}}

Answer 8

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

Answer 9

已测试

import Vue from 'vue'
    
Vue.filter('formatYear', (value) => {
  if (!value) return ''
  return moment(value).format('YYYY')
})

Answer 10

对于 moment.js 在 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>

Answer 11

global 成员在您的 <template> 范围内默认不可用。但是您可以使用 computed 属性轻松传递它们。

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

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

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

Answer 12

Moment.js 与 Vue3 js

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

Main.ts

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组件中使用的moments

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

Moment.js 使用 Vuejs

Moment.js with Vuejs

momentjs

vue.js