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 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
JS定时器实例
Apr 17 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
jQuery实现验证码功能
Mar 17 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
详解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
Wordpress php 分页代码
2009/10/21 PHP
php判断变量类型常用方法
2012/04/24 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
php中final关键字用法分析
2016/12/07 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
javascript动画浅析
2012/08/30 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
移动端界面的适配
2017/01/11 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
python操作redis数据库的三种方法
2020/09/10 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
python自动生成sql语句的脚本
2021/02/24 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
应届护士求职信范文
2014/01/26 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
户外拓展训练感想
2015/08/07 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS