时间戳转换日期格式 - Vue

Posted 2021-12-18 survivorsfyh

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

一、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>

　　

---

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