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

后端返回的时间格式是时间戳,需要以年月日的格式渲染在前端界面由于uniapp是基于vue的,所以对于时间的处理。我们也可以用到过滤器。1：在uniapp的项目的static目录底下，新建一个test.json文件,test.json里面写好模拟数据(未处理的时间戳）{"time":"1588061853944"}2：步骤：写一个请求方法请求json数据，在dat...

祈澈菇凉

9510人浏览 · 2020-06-18 22:01:17

祈澈菇凉 · 2020-06-18 22:01:17 发布

后端返回的时间格式是时间戳,需要以年月日的格式渲染在前端界面
由于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:显示结果如下