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 相关文章推荐
accesskey 提交
Jun 26 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
JavaScript实现单例模式实例分享
Dec 22 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
JavaScript函数重载操作实例浅析
May 02 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
Thinkphp中的volist标签用法简介
2014/06/18 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
ng-zorro-antd 入门初体验
2018/12/03 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
Python中字典和JSON互转操作实例
2015/01/19 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
对python中Json与object转化的方法详解
2018/12/31 Python
Python多线程thread及模块使用实例
2020/04/28 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
幼儿园家长会欢迎词
2014/01/09 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
家长对孩子的感言
2014/03/10 职场文书
愚人节活动策划方案
2014/03/11 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
golang内置函数len的小技巧
2021/07/25 Golang
Golang连接并操作MySQL
2022/04/14 MySQL