[JavaScript知识库]Vue中创建一个格式化时间的过滤器

1.在main.js中创建全局格式化时间的过滤器

// 定义一个全局格式化时间的过滤器
Vue.filter('dateFormat', function(originVal) {
  const dt = new Date(originVal*1000)//根据传进来的时间戳创建一个时间对象
  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}`
})

其中padStart(2,'0') 是用于补全头部的字符串方法，第一个参数表示字符串长度，第二个参数表示用于补全的字符

注意：1.这里时间戳要*1000后才对应正确的时间；

? ? ? ? ? ?2.这里的过滤器要写在new Vue()前才会起作用;不然会报错 [Vue warn]: Failed to resolve? ? ? ? ? ? ? ? ?filter: dateFormat

2.在组件中需要格式化时间的地方使用该过滤器

<h1>当前时间：{{ 1631367162 | dateFormat}}</h1>

3.结果展示