专栏首页编程微刊uniapp时间戳转换成年月日时分秒的格式

uniapp时间戳转换成年月日时分秒的格式

后端返回的时间格式是时间戳,需要以年月日的格式渲染在前端界面 由于uniapp是基于vue的,所以对于时间的处理。我们也可以用到 过滤器。

1:在uniapp的项目的static目录底下,新建一个test.json文件,

test.json里面写好模拟数据(未处理的时间戳)

{
"time":"1588061853944"
}

2:步骤: 写一个请求方法请求json数据,在data里面定义一个数组,将请求成功的数据赋值给数组,然后再渲染的view里面,这个步骤就不多说了,常规操作哦。

这里要用到filters过滤的方法,时间戳的处理其实和jquery里面用到的是一样的。

 <view class="text-cut">
            {{timeArray.time | formatDate}}
 </view>
 //时间戳的处理    
        filters: {
            formatDate: function(value) {
                var date = new Date();
                //date.setTime(value);
                var month = date.getMonth() + 1;
                var hours = date.getHours();
                if (hours < 10)
                    hours = "0" + hours;
                var minutes = date.getMinutes();
                if (minutes < 10)
                    minutes = "0" + minutes;
                var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
                    " " + hours + ":" + minutes;
                return time;
            }

        },

3:完整的示例代码如下index.vue

<template>
    <view>
        <view class="text-cut">
            {{timeArray.time | formatDate}}
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                timeArray: [],
            };
        },
        onLoad() {
            this.getList();
        },
        methods: {
            getList() {
                uni.request({
                    url: "../../static/test.json",
                    method: 'get',
                    dataType: 'json',
                    success: (res) => {
                        console.log(res.data);
                        this.timeArray = res.data;
                    },
                    // fail: function (err) {
                    //        console.log("服务器繁忙")
                    // }                
                });
            },
    
        },
        //时间戳的处理    
        filters: {
            formatDate: function(value) {
                var date = new Date();
                //date.setTime(value);
                var month = date.getMonth() + 1;
                var hours = date.getHours();
                if (hours < 10)
                    hours = "0" + hours;
                var minutes = date.getMinutes();
                if (minutes < 10)
                    minutes = "0" + minutes;
                var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
                    " " + hours + ":" + minutes;
                return time;
            }

        },
    }
</script>
<style>
</style>

4:显示结果如下

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery数据结构渲染(2):时间戳的处理

    王小婷
  • 如何将后端传的时间戳转化为年月日

    在项目里面,涉及到时间相关问题,后端一般会传一个时间戳给前端,后端传过来的时间戳如下。 data.json

    王小婷
  • 基于jQuery的公告无限循环滚动实现代码

    基于jQuery的公告无限循环滚动实现代码,效果如下,多用于pc端电商网站之中不断的循环更新的公告消息。

    王小婷
  • vue中的webpack配置(实现自动获取本地的IP,方便开发)

    用户4344670
  • iOS 开发中的 ViewModel

    MVVM 这个模式可能大家耳朵都听出茧了,但却没有多少人真正在项目中应用过,毕竟 Cocoa Touch 整体是基于“MVC”的,没有 Controller 根...

    Sheepy
  • go float 相等比较 原

    因为浮点数不是一种精确的表达方式,所以像整型那样直接用==来判断两个浮点数是否相等是不可行的,这可能会导致不稳定的结果。

    solate
  • 漫画说算法|有趣的扔鸡蛋问题

    有2个鸡蛋,从100层楼上往下扔,以此来测试鸡蛋的硬度。比如鸡蛋在第9层没有摔碎,在第10层摔碎了,那么鸡蛋不会摔碎的临界点就是9层。

    小白学视觉
  • 2018年度腾讯犀牛鸟精英人才培养计划优秀学生成果分享(一)

    随着互联网的发展逐渐进入 “深水区”,基础研究与应用研究融通创新发展已引发业界广泛关注,协调产学各方资源,加速培养更多创新型研究人才变得尤为重要。腾讯自201...

    腾讯高校合作
  • 第五节正则

    河湾欢儿
  • iOS runtime--获取类信息

    在iOS中可以通过runtime获取一个类的相关信息:有哪些方法、有哪些协议、有哪些属性、有哪些成员变量。安排的明明白白,老铁O(∩_∩)O哈哈~

    用户6094182

扫码关注云+社区

领取腾讯云代金券