vue filter 完美时间日期格式的代码


Posted in Javascript onAugust 14, 2019

vue filter时间日期格式的实例代码如下所示:

<template>
<div>{{msg | compFilter('yyyy-MM-dd hh:mm') }}</div>
</template>
<script>
export default {
data() {
  return {
    msg: new Date()
    // msg: 10,
  }
},
filters: {
  compFilter: function(value, format) {
    let o = {
      "M+": value.getMonth() + 1,![图片描述][1]
      "d+": value.getDate(),
      "h+": value.getHours(),
      "m+": value.getMinutes(),
      "s+": value.getSeconds(),
    }
    if(/(y+)/.test(format)){
      format = format.replace(RegExp.$1, (value.getFullYear() + "").substr(4-RegExp.$1.length));
      for(let k in o) {
        if(new RegExp(`(${k})`).test(format)){
          format = format.replace(RegExp.$1, (RegExp.$1.length == 1)?(o[k]):(("00" + o[k]).substr((""+o[k]).length)))
        }
      }
      return format;
    }
  }
},
}
</script>

知识点扩展:

vue filter方法-时间格式化

plugins/filter.js

import Vue from 'vue'
// 时间格式化
// 用法:<div>{{data | dataFormat('yyyy-MM-dd hh:mm:ss')}}</div>
Vue.filter('formatDate', function (value, fmt) {
 let getDate = new Date(value);
 let o = {
  'M+': getDate.getMonth() + 1,
  'd+': getDate.getDate(),
  'h+': getDate.getHours(),
  'm+': getDate.getMinutes(),
  's+': getDate.getSeconds(),
  'q+': Math.floor((getDate.getMonth() + 3) / 3),
  'S': getDate.getMilliseconds()
 };
 if (/(y+)/.test(fmt)) {
  fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
 }
 for (let k in o) {
  if (new RegExp('(' + k + ')').test(fmt)) {
   fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
  }
 }
 return fmt;
})

nuxt.config.js

plugins: ['@/plugins/element-ui', '@/plugins/filters.js'],

总结

以上所述是小编给大家介绍的vue filter 完美时间日期格式的代码 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery indexOf使用方法
Aug 19 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
js实现淘宝首页的banner栏效果
Nov 26 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
如何对react hooks进行单元测试的方法
Aug 14 #Javascript
vue 中 命名视图的用法实例详解
Aug 14 #Javascript
详解vue 命名视图
Aug 14 #Javascript
浅谈JS中this在各个场景下的指向
Aug 14 #Javascript
Vue路由模块化配置的完整步骤
Aug 14 #Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 #Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 #Javascript
You might like
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
总结python中pass的作用
2019/02/27 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
几款好用的python工具库(小结)
2020/10/20 Python
python实现双人五子棋(终端版)
2020/12/30 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
党员评议思想汇报
2014/10/08 职场文书
大四学生个人总结
2015/02/15 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS