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 router-link传参以及参数的使用实例

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

    下面小编就为大家带来一篇vue router-link传参以及参数的使用实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Vue 路由 过渡动效 数据获取方法

    Vue 路由 过渡动效 数据获取方法

    这篇文章主要介绍了Vue 路由 过渡动效 数据获取方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • vue的token刷新处理的方法

    vue的token刷新处理的方法

    这篇文章主要介绍了vue的token刷新处理的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • VueJs组件之父子通讯的方式

    VueJs组件之父子通讯的方式

    这篇文章主要介绍了VueJs组件之父子通讯的方式,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • 使用Vuex解决Vue中的身份验证问题

    使用Vuex解决Vue中的身份验证问题

    这篇文章主要介绍了使用Vuex解决Vue中的身份验证问题,本文通过文字实例相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-09-09
  • 使用canvas实现一个vue弹幕组件功能

    使用canvas实现一个vue弹幕组件功能

    这篇文章主要介绍了使用canvas实现一个vue弹幕组件功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • 手把手带你封装一个vue component第三方库

    手把手带你封装一个vue component第三方库

    这篇文章主要介绍了手把手带你封装一个vue component第三方库,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • Vue中v-for的数据分组实例

    Vue中v-for的数据分组实例

    下面小编就为大家分享一篇Vue中v-for的数据分组实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue EventBus自定义组件事件传递

    Vue EventBus自定义组件事件传递

    这篇文章主要介绍了Vue EventBus自定义组件事件传递,组件化应用构建是Vue的特点之一,本文主要介绍EventBus进行数据消息传递 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)

    Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)

    下面小编就为大家带来一篇Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论