Vue中定义全局过滤器,将时间戳转换为普通日期的格式

今天做vue项目中,需要将时间戳转换成普通日期的格式,于是想到两种方式去实现,记录在此,方便日后有需要时,直接复制粘贴
方法一:
1、运行 npm install moment --save 或者 yarn add moment 安装 moment 插件
2、在 main.js 文件中引入 moment 插件,并定义全局过滤器

// 导入事件格式化组件库
import moment from 'moment'
// 定义时间格式化全局过滤器
Vue.filter('dateFormat', (dateStr, pattern = 'YYYY-DD-MM HH:mm:ss') => {
  return moment(dateStr).format(pattern)
})

3、在后续组件中,如果需要转换时间戳,那么在直接引用 dateFormat 即可

{{ 时间戳 | dateFormat }}

方法二:
1、直接在 main.js 文件中定义一个全局过滤器

Vue.filter('dateFormat', function(originVal) {
  const dt = new Date(originVal)

  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

2、后面需要的时候,直接使用 dateFormat 即可

{{ 时间戳 | dateFormat }}

你可能感兴趣的:(Vue,vue)