Vue filter格式化时间戳时间成标准日期格式的方法

 更新时间:2018年09月16日 09:45:02   作者:codingNoob  
今天小编就为大家分享一篇Vue filter格式化时间戳时间成标准日期格式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

调用实例:yyyy-MM-dd或者yyyy-MM-dd hh:mm:ss进行格式

<div>{{data | dataFormat('yyyy-MM-dd hh:mm:ss')}}</div>

代码:

import Vue from 'vue'
Vue.filter('dataFormat', function (value, fmt) {
 let getDate = new Date(value);
 let o = {
 'M+': getDate.getMonth() + 1,
 'd+': getDate.getDate(),
 'h+': getDate.getHours(),
 'm+': getDate.getMinutes(),
 's+': getDate.getSeconds(),
 'q+': Math.floor((getDate.getMonth() + 3) / 3),
 'S': getDate.getMilliseconds()
 };
 if (/(y+)/.test(fmt)) {
 fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
 }
 for (let k in o) {
 if (new RegExp('(' + k + ')').test(fmt)) {
  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
 }
 }
 return fmt;
});

以上这篇Vue filter格式化时间戳时间成标准日期格式的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue项目中使用WebUploader实现文件上传的方法

    Vue项目中使用WebUploader实现文件上传的方法

    WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅 的现代 文件上传组件 。这篇文章主要介绍了在Vue项目中使用WebUploader实现文件上传,需要的朋友可以参考下
    2019-07-07
  • vue项目中使用pinyin转换插件方式

    vue项目中使用pinyin转换插件方式

    这篇文章主要介绍了vue项目中使用pinyin转换插件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue路由守卫及页面登录权限控制的设置方法(两种)

    Vue路由守卫及页面登录权限控制的设置方法(两种)

    这篇文章主要介绍了Vue路由守卫及页面登录权限控制的设置方法,本文通过实例代码通过两种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • Vue3中同时定义多个插槽的实现示例

    Vue3中同时定义多个插槽的实现示例

    本文主要介绍了Vue3中同时定义多个插槽的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-12-12
  • Vue如何清空对象

    Vue如何清空对象

    这篇文章主要介绍了Vue如何清空对象,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 解决vue组件销毁之后计时器继续执行的问题

    解决vue组件销毁之后计时器继续执行的问题

    这篇文章主要介绍了解决vue组件销毁之后计时器继续执行的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue项目中使用better-scroll实现菜单映射功能方法

    Vue项目中使用better-scroll实现菜单映射功能方法

    这篇文章主要介绍了Vue项目中使用better-scroll实现菜单映射功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 解决elementUI中el-tree树形结构中节点过滤的问题

    解决elementUI中el-tree树形结构中节点过滤的问题

    这篇文章主要介绍了解决elementUI中el-tree树形结构中节点过滤的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue项目之webpack打包静态资源路径不准确的问题

    vue项目之webpack打包静态资源路径不准确的问题

    这篇文章主要介绍了vue项目之webpack打包静态资源路径不准确的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue项目中使用骨架屏的方法

    vue项目中使用骨架屏的方法

    在页面加载数据之前,有一段空白时间,要么用loading加载,要么就用骨架屏,本文主要介绍了vue项目中使用骨架屏的方法,感兴趣的可以了解一下
    2021-05-05

最新评论