专栏首页生如夏花的个人博客在vue中自定义过滤器处理时间戳

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

写在之前

我们先来看一条数据

{
    "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中自定义时间戳过滤器

//自定义时间过滤器
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}`
})

调用时间过滤器对时间进行格式化

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ElementUi+Springboot 上传文件到阿里云oss

    许喜朝
  • Mybatis高级查询(四):延迟加载

    延迟加载的好处:先从单表查询、需要时再从关联表去关联查询,大大提高 数据库性能,因为查询单表要比关联查询多张表速度要快。

    许喜朝
  • hadoop-yarn-site.xml配置文件详解

    许喜朝
  • 算法学习笔记(二):贪心算法

    free赖权华
  • Spark数据传输及ShuffleClient(源码阅读五)

      我们都知道Spark的每个task运行在不同的服务器节点上,map输出的结果直接存储到map任务所在服务器的存储体系中,reduce任务有可能不在同一台机器...

    用户3003813
  • Vue+Django2.0 REST framework打造前后端分离的生鲜电商项目(三)设计数据库以及导入原始数据

    玩蛇的胖纸
  • 成为数据科学家,需具备这些技能

    用户1737318
  • Ios常用第三方动画框架(三)

    honey缘木鱼
  • 接地气,到底什么才是大数据开发工程师?

    最近发现有些同学并不太了解大数据开发工程师这个职位,所以想简单介绍一下什么是大数据开发工程师,当前互联网公司的数据开发到底是什么样子的?和一般的Java或者PH...

    Java团长
  • Python——购物车程序(列表的应用)

    上面的代码,刚学完列表的时候写的,其实存在很多问题:比如商品、价格做到2个列表里,每次索引起来很麻烦,万一不小心价格顺序改一下,大厦直接坍塌,所以要做一个嵌套的...

    Ed_Frey

扫码关注云+社区

领取腾讯云代金券