脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue.js将unix时间戳转换为自定义时间格式

vue.js将unix时间戳转换为自定义时间格式

 更新时间：2017年01月03日 10:59:03   作者：domainid  
这篇文章主要介绍了vue.js将unix时间戳转换为自定义时间格式的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本方法通过vue.js filter实现将unix时间戳转换为自定义标准时间格式

<!-- js代码 -->
$().ready(function() {
<!-- 自定义filter名称为'time' -->
 Vue.filter('time',
 <!-- value 格式为13位unix时间戳 -->
 <!-- 10位unix时间戳可通过value*1000转换为13位格式 -->
 function(value) {
 var date = new Date(value);
 Y = date.getFullYear(),
 m = date.getMonth() + 1,
 d = date.getDate(),
 H = date.getHours(),
 i = date.getMinutes(),
 s = date.getSeconds();
 if (m < 10) {
  m = '0' + m;
 }
 if (d < 10) {
  d = '0' + d;
 }
 if (H < 10) {
  H = '0' + H;
 }
 if (i < 10) {
  i = '0' + i;
 }
 if (s < 10) {
  s = '0' + s;
 }
 <!-- 获取时间格式 2017-01-03 10:13:48 -->
 // var t = Y+'-'+m+'-'+d+' '+H+':'+i+':'+s;
 <!-- 获取时间格式 2017-01-03 -->
 var t = Y + '-' + m + '-' + d;
 return t;
 });)
};
<!-- html代码 -->
<!-- 在需要转换格式的位置使用名为time的vue.js filter -->
<td>{{tab2.fb1 | time}}</td>

以上js代码中，年月日时分秒均已经获取到，可以自定义拼装成需要的标准格式。
需要注意，本方法中的传入值为13位unix时间戳，转换方式详参js代码注释。
function(value){…}部分可以单独提取出来作为普通的js方法使用。

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue项目前端错误收集之sentry教程详解

    vue项目前端错误收集之sentry教程详解

    Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。这篇文章主要介绍了vue项目前端错误收集之sentry,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-05-05
  • Vue中路由传参的实用方式 分享

    Vue中路由传参的实用方式 分享

    这篇文章主要为大家详细介绍了VUE项目中路由之间的传值方式，文中的示例代码讲解详细，涉及到的方法也都是开发时常用的，希望对大家有多帮助
    2023-06-06
  • Vue传递参数不在URL路径拼接显示问题

    Vue传递参数不在URL路径拼接显示问题

    这篇文章主要介绍了Vue传递参数不在URL路径拼接显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue中动画与过渡的使用教程

    Vue中动画与过渡的使用教程

    最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实,下面这篇文章主要给大家介绍了关于Vue中实现过渡动画效果的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue监听滚动条页面滚动动画示例代码

    vue监听滚动条页面滚动动画示例代码

    Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用,下面这篇文章主要给大家介绍了关于vue监听滚动条页面滚动动画的相关资料,需要的朋友可以参考下
    2023-06-06
  • 警告[vue-router] Duplicate named routes definition简单解决方法

    警告[vue-router] Duplicate named routes definition简单解决方法

    这篇文章主要关于介绍了警告[vue-router] Duplicate named routes definition的解决方法,这个错误提示是因为在Vue Router中定义了重复的路由名称,需要的朋友可以参考下
    2023-12-12
  • vue.js实现条件渲染的实例代码

    vue.js实现条件渲染的实例代码

    这篇文章主要介绍了vue.js实现条件渲染的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 详解vue slot插槽的使用方法

    详解vue slot插槽的使用方法

    本篇文章主要介绍了详解vue slot插槽的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue实现点击导航栏滚动页面到指定位置的功能(推荐)

    vue实现点击导航栏滚动页面到指定位置的功能(推荐)

    这篇文章主要介绍了vue实现点击导航栏滚动页面到指定位置的功能(推荐),步骤一是是通过获取不同板块的滚轮高度,步骤二通过编写执行滚动操作的函数,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

    浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

    这篇文章主要介绍了浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论