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本地存储userdata的一个bug说明
Jul 01 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
基于JavaScript实现简单扫雷游戏
Jan 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
解析php入库和出库
2013/06/25 PHP
浅谈php提交form表单
2015/07/01 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
js 窗口抖动示例
2013/09/04 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
jQuery知识点整理
2015/01/30 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
js实现内置计时器
2019/12/16 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
满月酒主持词
2014/03/27 职场文书
婚庆公司计划书
2014/09/15 职场文书
公司授权委托书
2014/10/17 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
山楂树之恋观后感
2015/06/11 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers
一篇文章带你复习java知识点
2021/06/28 Java/Android
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers