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 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 Javascript
详解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 flock 文件锁详细介绍
2012/12/29 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
超清晰的document对象详解
2007/02/27 Javascript
javascript 常用关键字列表集合
2007/12/04 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
Python Queue模块详细介绍及实例
2016/12/27 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
Delphi软件工程师试题
2013/01/29 面试题
服务标兵事迹材料
2014/05/04 职场文书
交通安全责任书范本
2014/07/24 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
努力工作保证书
2015/02/28 职场文书
趣味运动会新闻稿
2015/07/17 职场文书