Vue中使用moment格式化时间

引入 moment

  • 安装

    yarn:

    1
    yarn add moment

    npm:

    1
    npm i moment
  • 配置

    在plugins目录下,新建文件:moment.js,放入以下内容:

    1
    2
    3
    4
    5
    6
    7
    import Vue from 'vue'
    import moment from 'moment'

    Vue.filter('moment', function(value, pattern = 'YYYY-MM-DD HH:mm:ss') {
    if (!value) { return null }
    return moment(value).format(pattern)
    })

    这里设置了默认的时间样式是YYYY-MM-DD HH:mm:ss。

    最后,在nuxt.config.js文件的plugins中添加:

    1
    2
    3
    4
    5
    plugins: [
    'xxxx',
    // 引入我们刚刚新增的文件moment.js
    '~/plugins/moment'
    ]

OK ,重启后就可以开始用了。

全局设置多种格式

比如需要配置两种格式,日期型和时间型。

修改plugins/moment.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
import Vue from 'vue'
import moment from 'moment'

const formats = {
"date": "YYYY-MM-DD",
"datetime": "YYYY-MM-DD hh:mm:ss"
}

Vue.filter('moment', function(value, format='date') {
if (!value) { return null }
const pattern = formats[format]
return moment(value).format(pattern)
})

这里,设置默认为日期格式。

页面使用

比如需要显示商品创建时间:

1
2
3
4
5
{{ product.created_at | moment('datetime') }}

// 或者仅仅显示日期
{{ product.created_at | moment('date') }}
{{ product.created_at | moment }}

因为设置了参数format默认是date, 当moment内不传参数时,则采用日期样式。

参考

how to format date for display