Vue中使用moment格式化时间

发表于 | 分类于 | |   |   303 words

引入 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