Vue.js中将时间戳转换为日期格式

Vue.js中将时间戳转换为日期格式js 中将时间戳转换为日期格式什么是时间戳 Unix 时间戳 Unixtimestam 或称 Unix 时间 Unixtime POSIX 时间 POSIXtime 是一种时间表示方式 定义为从格林威治时间 1970 年 01 月 01 日 00 时 00 分 00 秒起至现在的总秒数 问题描述在 Vue 项目中从后台请求过来的数据是一个对象数组 对象中的 create time 属性为时间戳表示的创建时间 在前端的展示 需要用正常的年 月 日时 分 秒这种格式 例如转换为 1970 0

什么是时间戳

Unix时间戳(Unix timestamp),或称Unix时间(Unix time)、POSIX时间(POSIX time),是一种时间表示方式,定义为从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数。

问题描述

在这里插入图片描述

解决代码

核心js代码

function add0(m){ 
   return m<10?'0'+m:m } function format(shijianchuo) { 
    //shijianchuo是整数,否则要parseInt转换 var time = new Date(shijianchuo); var y = time.getFullYear(); var m = time.getMonth()+1; var d = time.getDate(); var h = time.getHours(); var mm = time.getMinutes(); var s = time.getSeconds(); return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s); } 

在Vue项目中的使用

methods:{ 
    // 转换时间戳为日期格式方法 add(m) { 
    return m < 10 ? "0" + m : m; }, format(shijianchuo) { 
    //shijianchuo是整数,否则要parseInt转换 var time = new Date(shijianchuo); var y = time.getFullYear(); var m = time.getMonth() + 1; var d = time.getDate(); var h = time.getHours(); var mm = time.getMinutes(); var s = time.getSeconds(); return ( y + "-" + this.add(m) + "-" + this.add(d) + " " + this.add(h) + ":" + this.add(mm) + ":" + this.add(s) ); }, } 
methods:{ 
    getOrderList() { 
    this.$http .get("orders", { 
    params: this.queryInfo, }) .then((res) => { 
    console.log(res); var temp = res.data.data.goods; // 将时间戳转换为日期格式 for (var i = 0; i < temp.length; i++) { 
    temp[i].create_time = this.format(temp[i].create_time); } this.orderList = temp; this.total = res.data.data.total; }); }, } 

完活,成品展示

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/178512.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月26日 下午5:07
下一篇 2026年3月26日 下午5:07


相关推荐

  • 线程池不使用 Executors 去创建,而是通过 ThreadPoolExecutor 的方式[通俗易懂]

    线程池不使用 Executors 去创建,而是通过 ThreadPoolExecutor 的方式

    2022年3月11日
    38
  • python分组排序_Python 排序分组问题

    python分组排序_Python 排序分组问题_list=[{‘value’:123,’upclock’:1234567},{‘value’:423,’upclock’:2123},{‘value’:123,’upclock’:1234567},{‘value’:423,’upclock’:1123},{‘value’:423,’upclock’:1123},{‘value’:872,’upclock’:…

    2022年6月16日
    35
  • 马拉车java_算法-Manacher算法 / 马拉车算法(Java实现)

    马拉车java_算法-Manacher算法 / 马拉车算法(Java实现)Manacher 算法 也叫 马拉车 算法 Manacher 算法的应用范围要狭窄得多 但是它的思想和拓展 kmp 算法有很多共通支出 所以在这里介绍一下 Manacher 算法是查找一个字符串的最长回文子串的线性算法 什么是回文串 所谓回文串 简单来说就是正着读和反着读都是一样的字符串 比如 abba noon 等等 一个字符串的最长回文子串即为这个字符串的子串中 是回文串的最长的那个 计算回文串的几种方式

    2026年3月17日
    1
  • C++stl库_c++库

    C++stl库_c++库熟练使用STL标准库是每个C++程序员的必备技能。C++标准程序库发展至今,几乎所有内容都被设计为了模板的形式,STL已经成为C++程序库的重要组成部分。可以这么说,如果C++不支持STL标准模板库,就无法使用程序库。在大多数人看来,计算机既神秘有能干,但在程序员的眼中,计算机又蠢又笨,唯一的优点就是运算速度比人快,不给指令什么都干不了,就是给指令,计算机也不能灵活运用。比如说,在C++中,同样一个加法,不同的数据类型,要给出不同的运行代码:#include<iostrea

    2022年10月9日
    4
  • 图文详解| Node.js安装及环境配置之Windows篇

    图文详解| Node.js安装及环境配置之Windows篇

    2022年2月19日
    38
  • Excel 读取并解密

    Excel 读取并解密packagecom;/****/importjava.io.File;importjava.io.FileInputStream;importjava.io.FileNotFoundException;importjava.io.FileOutputStream;importjava.io.IOException;importjav…

    2022年6月28日
    28

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号