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