vue将时间戳转换成自定义时间格式的方法

 更新时间:2018年03月02日 09:48:11   作者:捞档哥  
下面小编就为大家分享一篇vue将时间戳转换成自定义时间格式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

1、首先建立一个date.js文件,写入如下代码:

export function formatDate (date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
return fmt;
};
function padLeftZero (str) {
return ('00' + str).substr(str.length);
};

2、在所要转换的页面引入date.js文件:

import {formatDate} from '../../date.js';

3、调用方法如下:

formatDate(new Date(time * 1000), 'yyyy-MM-dd hh:mm');

以上这篇vue将时间戳转换成自定义时间格式的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue router-link传参以及参数的使用实例

    vue router-link传参以及参数的使用实例

    下面小编就为大家带来一篇vue router-link传参以及参数的使用实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 解决vue 退出动画无效的问题

    解决vue 退出动画无效的问题

    这篇文章主要介绍了解决vue 退出动画无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue实现多级侧边栏的封装

    vue实现多级侧边栏的封装

    这篇文章主要为大家详细介绍了vue实现多级侧边栏的封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vitejs预构建理解及流程解析

    vitejs预构建理解及流程解析

    这篇文章主要为大家介绍了vitejs预构建理解及流程解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue.js与 ASP.NET Core 服务端渲染功能整合

    Vue.js与 ASP.NET Core 服务端渲染功能整合

    本文通过案例给大家详细分析了ASP.NET Core 与 Vue.js 服务端渲染,需要的朋友可以参考下
    2017-11-11
  • vue3.x中apollo的使用案例代码

    vue3.x中apollo的使用案例代码

    这篇文章主要介绍了vue3.x中apollo的使用,通过前端自身直接获取到apollo的配置目前看到官方支持的客户端是没有vue的,本文给大家介绍了前端获取到apollo数据的过程,需要的朋友可以参考下
    2023-02-02
  • vue中watch的实际开发学习笔记

    vue中watch的实际开发学习笔记

    watch是Vue实例的一个属性是用来响应数据的变化,需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的,下面这篇文章主要给大家介绍了关于vue中watch的实际开发笔记,需要的朋友可以参考下
    2022-11-11
  • Vue表格组件Vxe-table使用技巧总结

    Vue表格组件Vxe-table使用技巧总结

    这篇文章主要给大家介绍了关于Vue表格组件Vxe-table使用技巧的相关资料,文中还介绍了VXEtable展示指定行所遇到得问题,对大家学习或者使用Vxe-table具有一定的参考学习价值,需要的朋友可以参考下
    2022-09-09
  • element 时间选择器禁用选择的使用示例

    element 时间选择器禁用选择的使用示例

    最近做项目遇到的一个功能,禁止用户在输入内容的时候选择今天以前的日期或者包含今日的日期,本文主要介绍了element 时间选择器禁用选择的使用示例,感兴趣的可以了解一下
    2023-09-09
  • vue-cli中打包图片路径错误的解决方法

    vue-cli中打包图片路径错误的解决方法

    这篇文章主要介绍了vue-cli中打包图片路径错误的解决方法 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10

最新评论