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 相关文章推荐
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
vue动态绑定class的几种常用方式小结
May 21 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的类 功能齐全的发送邮件类
2006/10/09 PHP
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
php获取apk包信息的方法
2014/08/15 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
python处理csv数据的方法
2015/03/11 Python
详解Python字符串对象的实现
2015/12/24 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
小班上学期幼儿评语
2014/12/30 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
Python实现byte转integer
2021/06/03 Python