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下判断是否为闰年的Datetime包
Oct 26 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
vue发送ajax请求详解
Oct 09 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 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
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
YII中assets的使用示例
2014/07/31 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
js实现密码强度检验
2017/01/15 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
在Python中使用Neo4j数据库的教程
2015/04/16 Python
Python闭包实现计数器的方法
2015/05/05 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
婚礼证婚人证婚词
2014/01/08 职场文书
白莲教口号
2014/06/18 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
律师催款函范文
2015/06/24 职场文书
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android
Python代码实现双链表
2022/05/25 Python