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 相关文章推荐
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
js评分组件使用详解
Jun 06 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
如何对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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
python数据归一化及三种方法详解
2019/08/06 Python
python mock测试的示例
2020/10/19 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
企业为何需要商业计划书
2013/12/26 职场文书
理发店策划方案
2014/06/05 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
政工例会汇报材料
2014/08/26 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
vue实力踩坑之push当前页无效
2022/04/10 Vue.js
微信小程序实现轮播图指示器
2022/06/25 Javascript