前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在vue中自定义过滤器处理时间戳

在vue中自定义过滤器处理时间戳

作者头像
许喜朝
发布2020-11-05 14:28:24
1.1K0
发布2020-11-05 14:28:24
举报
文章被收录于专栏:生如夏花的个人博客
写在之前

我们先来看一条数据

代码语言:javascript
复制
{
    "data": {
        "total": 50,
        "pagenum": "1",
        "goods": [
            {
                "goods_id": 144,
                "goods_name": "asfdsd",
                "goods_price": 1,
                "goods_number": 1,
                "goods_weight": 1,
                "goods_state": null,
                "add_time": 1512954923,
                "upd_time": 1512954923,
                "hot_mumber": 0,
                "is_promote": false
            }
        ]
    },
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}

这是一条json数据,add_time,upd_time字段,返回的时间戳的格式,

显然这不是我们想要的,

当然也可以去麻烦帅气的后端小哥哥,把时间戳转换成时间,在传回来。你可以这样做,但是显然这是不推荐的,这样会增加服务器的压力,应当把更多客户机能做的交给客户机

自定义时间戳过滤器

在main.js中自定义时间戳过滤器

代码语言:javascript
复制
//自定义时间过滤器
Vue.filter('dateFormat',function(originVal) {
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  //月份不足两位用0补齐
  const m = (dt.getMonth() + 1 +'').padStart(2,'0')
  const d = (dt.getDay() + '').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}`
})
调用时间过滤器对时间进行格式化
代码语言:javascript
复制
<el-table-column label="创建时间" prop="addTime" width="150px"><template slot-scope="scope">{{scope.row.addTime | dateFormat}}</template></el-table-column>

如果需要在后端对时间戳进行处理,那么可以移步这里java处理时间戳

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/11/03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 写在之前
  • 自定义时间戳过滤器
  • 调用时间过滤器对时间进行格式化
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档