原生js结合vue实现时间过滤器

最新推荐文章于 2024-05-30 21:28:56 发布

城南花开ze

最新推荐文章于 2024-05-30 21:28:56 发布

阅读量371

点赞数

分类专栏： Javascript 文章标签： js vue 时间过滤器

本文链接：https://blog.csdn.net/weixin_42614080/article/details/104385064

版权

Javascript 专栏收录该内容

111 篇文章 18 订阅

订阅专栏

实现时间过滤器需要vue.filter对象，自定义过滤器的名称为dateFormat，后面就是传入的参数，originVal就是传入需要的时间。
通过new Date()方法获取传入的日期对象，然后就通过这个日期对象获取具体的年月份，以及时分秒的值，最后再返回需要的日期格式，使用时间过滤器，代码如下：

 <el-table-column label="时间" prop="add_time" width="140px">
    <template slot-scope="scope">
        {{ scope.row.add_time | dateFormat}}
    </template>
</el-table-column>

时间过滤器，完整代码如下：

// 引入vue
import Vue from 'vue'

// 自定义时间的过滤器
Vue.filter('dateFormat', function(originVal) {
  // 获取传入的日期时间
  const dt = new Date(originVal)
  // 获取传入日期的年份
  const y = dt.getFullYear()
  // 获取传入日期的月份，从0开始，加1到正常月份，加''变为字符串
  const m = (dt.getMonth() + 0 + '').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}`
})