时间戳转换日期格式 - Vue

最新推荐文章于 2024-06-27 17:08:25 发布

survivorsfyh

最新推荐文章于 2024-06-27 17:08:25 发布

阅读量1k

点赞数 1

分类专栏： Vue 文章标签： Vue formatDate

本文链接：https://blog.csdn.net/survivorsfyh/article/details/90259636

版权

Vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

日常开发中经常会遇到时间相关的问题，服务端返回的数据都是以时间戳的方式，那么需要将其处理转化为对应的时间格式，具体方式如下：

一、filters 中 formatDate 方法实现：

<script>
    export default {
        name: "listItem",
        props:['datas'],
        data(){
            return{
                item:this.datas
            }
        },
        methods:{
            payClick(item){
                this.$emit("payClick",item)
            }
        },
        filters: {
            formatDate: function (value) {// 时间戳转换日期格式方法
                if (value == null) {
                    return '';
                } else {
                    let date = new Date(value);
                    let y = date.getFullYear();// 年
                    let MM = date.getMonth() + 1;// 月
                    MM = MM < 10 ? ('0' + MM) : MM;
                    let d = date.getDate();// 日
                    d = d < 10 ? ('0' + d) : d;
                    let h = date.getHours();// 时
                    h = h < 10 ? ('0' + h) : h;
                    let m = date.getMinutes();// 分
                    m = m < 10 ? ('0' + m) : m;
                    let s = date.getSeconds();// 秒
                    s = s < 10 ? ('0' + s) : s;
                    return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
                }
            }
        }
    }
</script>

二、时间戳转换日期方法的调用



<template>
  <div class="list-item" @click="itemClick(item)">
    <!-- 其中 item['startTime'] 为服务端的时间戳数据, | formatDate 为时间戳转换日期格式的方法调用 -->
    <van-col span="6" class="row-detail-goodsOrder-Time">{{item['startTime'] | formatDate}}</van-col>
    <!-- 转换结果为 2019-05-15 15:30:24 -->
  </div>
</template>

以上便是此次内容的小结，希望能对大家有所帮助！