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:显示结果如下

 

相关文章
|
6月前
|
API
uniapp上传文件时用到的api是什么?格式是什么?
uniapp上传文件时用到的api是什么?格式是什么?
|
6月前
|
移动开发 小程序 JavaScript
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
619 0
|
4月前
uniapp【组件封装】时间戳格式化为星期
uniapp【组件封装】时间戳格式化为星期
81 0
|
6月前
|
移动开发 JavaScript 小程序
【uniapp 小程序开发语法篇】资源引入 | 语法介绍 | UTS 语法支持(链接格式)
【uniapp 小程序开发语法篇】资源引入 | 语法介绍 | UTS 语法支持(链接格式)
360 0
|
JavaScript
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
657 0
vue uniapp通用省市下拉选择器组件 布局样式可灵活根据ui变更 (区域 可根据数组嵌套的格式继续往下模仿即可)
uniapp的picker日期转时间戳多8小时问题
uniapp的picker组件前段时间用的时候发现一个很神奇的问题,就是选择后生成的时间戳会多出8小时
285 0
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
127 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
62 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
82 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
112 7