vue2.0 自定义日期时间过滤器


Posted in Javascript onJune 07, 2017

方法一:

// template
{{a | data}}
//script
data:{
  a: Date.now()
}
filters: {
  data:function (input) {
    var d = new Date(input);
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate();
    var hour = d.getHours();
    var minutes = d.getMinutes();
    var seconds = d.getSeconds();
    return year+ '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
  }

方法二: 正则

// template
{{date | formatDate}}
//script
import {formatDate} from '../../common/js/date'
filters: {
 formatDate (time) {
  let date = new Date(time)
  return formatDate(date, 'yyyy-MM-dd hh:mm')
 }
}
//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)
}

以上所述是小编给大家介绍的vue2.0 自定义日期时间过滤器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery操作select option 的代码小结
Jun 21 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
js密码强度检测
Jan 07 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
详解Node.js 命令行程序开发教程
Jun 07 #Javascript
详解vee-validate的使用个人小结
Jun 07 #Javascript
微信小程序多张图片上传功能
Jun 07 #Javascript
Vue.js对象转换实例
Jun 07 #Javascript
深入理解Angular4中的依赖注入
Jun 07 #Javascript
Vue中保存用户登录状态实例代码
Jun 07 #Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 #jQuery
You might like
php动态生成JavaScript代码
2009/03/09 PHP
php实现的验证码文件类实例
2015/06/18 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
ES6函数和数组用法实例分析
2020/05/23 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
python 解决函数返回return的问题
2020/12/05 Python
Linux的文件类型
2016/07/05 面试题
在职人员函授期间自我评价分享
2013/11/08 职场文书
高中英语教学反思
2014/02/04 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
捐书活动总结
2014/05/04 职场文书
关于责任的演讲稿
2014/05/20 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
行政撤诉申请书
2015/05/18 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android
解析MySQL索引的作用
2022/03/03 MySQL