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 相关文章推荐
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
vue v-model的用法解析
Oct 19 Javascript
vue项目支付功能代码详解
Feb 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
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
PHP 无限级分类
2017/05/04 PHP
php数组和链表的区别总结
2019/09/20 PHP
XML的代替者----JSON
2007/07/21 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
python中的逆序遍历实例
2019/12/25 Python
Python面向对象封装操作案例详解
2019/12/31 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
实现向右循环移位
2014/07/31 面试题
SQL Server笔试题
2012/01/10 面试题
数据员岗位职责
2013/11/19 职场文书
我的网上商城创业计划书
2013/12/26 职场文书
家长给幼儿园的表扬信
2014/01/09 职场文书
教师职称自我鉴定
2014/02/12 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
政府法律服务方案
2014/06/14 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
观看建国大业观后感
2015/06/01 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS