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 相关文章推荐
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
PHP多维数组排序array详解
2017/11/21 PHP
PHP7内核之Reference详解
2019/03/14 PHP
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
python PIL模块与随机生成中文验证码
2016/02/27 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
基于python socketserver框架全面解析
2017/09/21 Python
zookeeper python接口实例详解
2018/01/18 Python
Python遍历pandas数据方法总结
2018/02/09 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
物流管理专业职业生涯规划书
2014/01/06 职场文书
总经理司机岗位职责
2015/04/10 职场文书
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL