vue时间格式化实例代码

 更新时间:2017年06月13日 17:06:36   作者:22337383  
本篇文章主要介绍了vue时间格式化实例代码,这里整理了详细的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

整理文档,搜刮出一个vue时间格式化实例代码,稍微整理精简一下做下分享。

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);
}

把上面代码保存为date.js放到你的公共js文件夹中。

在你的需要格式化时间戳的组件里像下面这样使用:

<template>
  <!-- 过滤器 -->
  <div>{{time | formatDate}}</div>
  <!-- 输出结果 -->
  <!-- <div>2016-07-23 21:52</div> -->
</template>
<script>
import {formatDate} from './common/date.js';
export default {
  data() {
    return {
      time:1469281964000
    }
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, yyyy-MM-dd hh:mm);
    }
  }
}
</script>

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

相关文章

  • vue中监听返回键问题

    vue中监听返回键问题

    这篇文章主要介绍了解决vue中监听返回键问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 使用Vant完成通知栏Notify的提示操作

    使用Vant完成通知栏Notify的提示操作

    这篇文章主要介绍了使用Vant完成通知栏Notify的提示操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue + Webpack + Vue-loader学习教程之功能介绍篇

    Vue + Webpack + Vue-loader学习教程之功能介绍篇

    这篇文章主要介绍了关于Vue + Webpack + Vue-loader功能介绍的相关资料,文中介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-03-03
  • Vue+ElementUI项目使用webpack输出MPA的方法

    Vue+ElementUI项目使用webpack输出MPA的方法

    这篇文章主要介绍了Vue+ElementUI项目使用webpack输出MPA的方法,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue中过滤器filter的讲解

    vue中过滤器filter的讲解

    今天小编就为大家分享一篇关于vue中过滤器filter的讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 详解vue组件化开发-vuex状态管理库

    详解vue组件化开发-vuex状态管理库

    本篇文章主要介绍了详解vue组件化开发-vuex状态管理库,具有一定的参考价值,有兴趣的可以了解一下。
    2017-04-04
  • 面试题:react和vue的区别分析

    面试题:react和vue的区别分析

    这篇文章主要介绍了react和vue的区别分析,在面试中经常会遇到,小编通过实例文字相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 基于vue2.x的电商图片放大镜插件的使用

    基于vue2.x的电商图片放大镜插件的使用

    本篇文章主要介绍了基于vue2.x的电商图片放大镜插件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 理理Vue细节(推荐)

    理理Vue细节(推荐)

    这篇文章主要介绍了Vue细节,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue 实现小程序或商品秒杀倒计时

    vue 实现小程序或商品秒杀倒计时

    这篇文章主要介绍了vue 实现倒计时秒杀的组件,紧接着通过实例代码给大家介绍小程序或者vue商品秒杀倒计时功能,需要的朋友可以参考下
    2019-04-04

最新评论