Vue中使用moment格式化时间

引入 moment

  • 安装

    yarn:

    yarn add moment
    

    npm:

    npm i moment
    
  • 配置

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

    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中添加:

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

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

全局设置多种格式

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

修改plugins/moment.js:

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)
})

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

页面使用

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

{{ product.created_at | moment('datetime') }}

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

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

参考

how to format date for display