与Vuejs的Moment.js

时间:2015-12-16 09:16:27

标签: momentjs vue.js

我尝试使用vue-for

中的以下内容打印日期时间
{{ moment().format('MMMM Do YYYY, h:mm:ss a') }}

但是,它没有出现。这只是一片空白。我如何尝试在vue中使用时刻?

12 个答案:

答案 0 :(得分:162)

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

答案 1 :(得分:90)

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

main.js

import moment from 'moment'

Vue.prototype.moment = moment

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

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

答案 2 :(得分:23)

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>

答案 3 :(得分:8)

我在单个文件组件中使用了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>

答案 4 :(得分: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

答案 5 :(得分:4)

对于 Vue 3 中的 moment.js

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>

答案 6 :(得分:1)

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

虽然我没有使用过它,因此无法说出它的有效性,但我确实找到了https://github.com/brockpetrie/vue-moment作为替代考虑

答案 7 :(得分:1)

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

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

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

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

答案 8 :(得分:1)

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

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

答案 9 :(得分:0)

import VueMoment from 'vue-moment';
Vue.use(VueMoment);

const moment = require('moment')
require('moment/locale/es')

Vue.use(require('vue-moment'), {
    moment
})

console.log(Vue.moment().locale()) //es

答案 10 :(得分:0)

  

时刻>

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

答案 11 :(得分:0)

已测试

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