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 tab 选项卡
Apr 26 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
jQuery原生的动画效果
Jul 10 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 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
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
Javascript读取cookie函数代码
2010/10/16 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
Python中如何获取类属性的列表
2016/12/26 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
Python如何解除一个装饰器
2020/08/07 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
简历自我评价怎么写好呢?
2014/01/04 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
廉洁校园实施方案
2014/05/25 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
春晚观后感
2015/06/11 职场文书
电台广播稿范文
2015/08/19 职场文书
详解Redis复制原理
2021/06/04 Redis
MySQL慢查询优化解决问题
2022/03/17 MySQL