vue获取时间戳转换为日期格式代码实例

 更新时间:2019年04月17日 09:36:32   作者:西风XF  
这篇文章主要介绍了vue获取时间戳转换为日期格式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

vue获取时间戳转换为日期格式。

方法一为转载黄轶老师的format方法:出处(黄轶老师github    https://github.com/ustbhuangyi);

// 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);
};
<!-- **.vue -->
<template>
  <!-- time时间戳 -->
  <div>{{time | formatDate}}</div>
  <!-- 输出结果 -->
  <!-- <div>2016-07-23 21:52</div> -->
</template>
<script>
import {formatDate} from './common/date.js';
export default {
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm');
    }
  }
}
</script>

方法二为自写(在百度出的结果十个有九个是上述方法且在不想使用上述方法的情况下):

使用vue.filter

<!-- demo.vue -->
<template>
 <!-- time为时间戳 -->
 <div>{{time | formatDate}}</div>
 <!-- 结果为 2018-01-23 18:31:35 -->
</template>
<script type="text/ecmascript-6">
 export default {
  data() {
   return {
    time: 1516703495241
   };
  },
  filters: {
   formatDate: function (value) {
    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>
<style lang="stylus" rel="stylesheet/stylus">
 
</style>

以上所述是小编给大家介绍的vue获取时间戳转换为日期格式详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Electron实现静默打印小票的流程详解

    Electron实现静默打印小票的流程详解

    很多情况下程序中使用的打印都是用户无感知的,并且想要灵活的控制打印内容,往往需要借助打印机给我们提供的api再进行开发,这种开发方式非常繁琐,并且开发难度较大,本文给大家介绍了Electron实现静默打印小票的流程,感兴趣的朋友可以参考下
    2024-06-06
  • vue中computed和watch的使用实例代码解析

    vue中computed和watch的使用实例代码解析

    这篇文章主要介绍了vue中computed和watch的综合运用实例,主要需求是点击按钮实现天气的切换效果结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • vue3中7种路由守卫的使用大全举例

    vue3中7种路由守卫的使用大全举例

    最近在学习vue,感觉路由守卫这个地方知识点挺多的,而且很重要,下面这篇文章主要给大家介绍了关于vue3中7种路由守卫的使用大全,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue项目在webpack2实现移动端字体自适配功能

    vue项目在webpack2实现移动端字体自适配功能

    这篇文章主要介绍了vue项目在webpack2实现移动端字体自适配的相关知识,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • 基于Echarts图表在div动态切换时不显示的解决方式

    基于Echarts图表在div动态切换时不显示的解决方式

    这篇文章主要介绍了基于Echarts图表在div动态切换时不显示的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 详解Vue中CSS样式穿透问题

    详解Vue中CSS样式穿透问题

    这篇文章主要介绍了VUE中CSS样式穿透问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vue parseHTML 函数源码解析AST基本形成

    vue parseHTML 函数源码解析AST基本形成

    这篇文章主要为大家介绍了vue parseHTML 函数源码解析AST基本形成,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • VUE 实现动态给对象增加属性,并触发视图更新操作示例

    VUE 实现动态给对象增加属性,并触发视图更新操作示例

    这篇文章主要介绍了VUE 实现动态给对象增加属性,并触发视图更新操作,涉及vue.js对象属性动态操作及视图更新相关实现技巧,需要的朋友可以参考下
    2019-11-11
  • vue使用pdf.js预览pdf文件的方法

    vue使用pdf.js预览pdf文件的方法

    在页面进行pdf预览的时候,由于文件不能够打印和下载很难满足客户的需求,接下来通过本文给大家介绍vue使用pdf.js来进行pdf预览,需要的朋友可以参考下
    2021-12-12
  • Vue3中响应式解构props的使用

    Vue3中响应式解构props的使用

    本文主要介绍了Vue3中响应式解构props的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11

最新评论