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 相关文章推荐
js检查页面上有无重复id的实现代码
Jul 17 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
React中的refs的使用教程
Feb 13 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
JavaScript实现表单验证功能
Dec 09 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重定向的三种方法分享
2012/02/22 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
搬家公司的创业计划书
2014/01/01 职场文书
村容村貌整治方案
2014/05/21 职场文书
团队精神口号
2014/06/06 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
催款函范本大全
2015/06/24 职场文书
婚宴主持词
2015/06/30 职场文书
AJAX实现省市县三级联动效果
2021/10/16 Javascript
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers
Go gorilla/sessions库安装使用
2022/08/14 Golang