Vue使用过滤器解决时间格式问题

232 阅读1分钟

过滤器方法:

Vue.filter(过滤器的名称,处理函数)
函数中的第一个参数是需要被处理的数据

1、在全局组件中写入并调试过滤器

Vue.filter('forMat', (data, times) => {
  console.log(times, 99)
  var t = new Date(data)
  console.log(t, 88)
  var yy = t.getFullYear()
  // toString()转换成字符串 否则无法补0
  // 如果少于2位数 则在前面补0 padend这是在末尾补
  // getmonth()这个方法获取的是索引值,他的值从0开始,所以要加1才会得到真正的月份
  var mm = (t.getMonth() + 1).toString().padStart(2, 0)
  var dd = t.getDate().toString().padStart(2, 0)
  var hh = t.getHours()
  var min = t.getMinutes()
  var ss = t.getSeconds()
  if (times === 'YYYY') {
    return `${yy}-${mm}-${dd}`
  }
  return `${yy}-${mm}-${dd}-${hh}:${min}:${ss}`
})

2、在渲染数据时以插槽的方式 用管道符使用过滤器 可以多次过滤 但基本用不上

{{ t | forMat('YYYY') }}

image.png