Vue 全局时间过滤器

Vue.js时间过滤器实现

最新推荐文章于 2023-07-29 15:40:08 发布

原创最新推荐文章于 2023-07-29 15:40:08 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了一种在Vue.js中实现日期格式化的全局过滤器方法。通过将原始时间戳转换为更易读的日期格式，如“年-月-日时:分:秒”，该过滤器增强了用户体验。代码示例展示了如何使用padStart方法确保单个数字前缀有零，以保持日期格式的一致性。

// 全局的时间过滤器
Vue.filter('dateFormat',function(originVal){
  // 提到需要过滤的日期
  const date = new Date(originVal)
  // 获取年份
  const Y = date.getFullYear()
  // 获取月份 如果不足两位,在前面以0来补全
  const M = (date.getMonth() + 1 + '').padStart(2,'0')
  // 获取日 如果不足两位,在前面以0来补全
  const D = (date.getDate() + '').padStart(2,'0')
  // 小时
  const hh = (date.getHours() + '').padStart(2,'0')
  // 分钟
  const mm = (date.getMinutes() + '').padStart(2,'0')
  // 秒
  const ss = (date.getSeconds() + '').padStart(2,'0')
  // 返回出 年-月-日 时:分:秒
  return `${Y}-${M}-${D} ${hh}:${mm}:${ss} `
})
//使用
<template slot-scope="scope">{{scope.row.add_time | dateFormat}}</template>