vue时间格式化实例代码


Posted in Javascript onJune 13, 2017

整理文档,搜刮出一个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>

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

Javascript 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
原生javascript获取元素样式
Dec 31 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
详解vue slot插槽的使用方法
Jun 13 #Javascript
详解Vue.js分发之作用域槽
Jun 13 #Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 #Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 #Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 #Javascript
微信小程序动态显示项目倒计时效果
Jun 13 #Javascript
深究AngularJS之ui-router详解
Jun 13 #Javascript
You might like
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
启动targetcli时遇到错误解决办法
2017/10/26 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
python的移位操作实现详解
2019/08/21 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
python设置环境变量的作用整理
2020/02/17 Python
python 实现有道翻译功能
2021/02/26 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
大专生求职信
2014/06/29 职场文书
公司收款委托书范本
2014/09/20 职场文书
节水倡议书
2015/01/19 职场文书
冰峪沟导游词
2015/02/09 职场文书