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

 更新时间:2019年08月14日 10:02:43   作者:breathfish  
这篇文章主要介绍了vue filter 完美时间日期格式的方法,文中给大家提到了vue filter方法-时间格式化 的代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

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 完美时间日期格式的代码 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • vue3组合式api创建单文件组件的写法

    vue3组合式api创建单文件组件的写法

    Vue3 中的 Composition API 是一种新的编写组件逻辑的方式,它提供了更好的代码组织、类型推导、测试支持和复用性,本文为大家介绍了vue3利用组合式api创建单文件组件的方法,感兴趣的可以了解下
    2023-08-08
  • vue3的二维码组件vue3-next-qrcode

    vue3的二维码组件vue3-next-qrcode

    这篇文章主要为大家介绍了vue3的二维码组件vue3-next-qrcode示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • el autocomplete支持分页上拉加载使用详解

    el autocomplete支持分页上拉加载使用详解

    这篇文章主要为大家介绍了el autocomplete支持分页上拉加载使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 详解Vue项目中出现Loading chunk {n} failed问题的解决方法

    详解Vue项目中出现Loading chunk {n} failed问题的解决方法

    这篇文章主要介绍了详解Vue项目中出现Loading chunk {n} failed问题的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 十分钟带你快速上手Vue3过渡动画

    十分钟带你快速上手Vue3过渡动画

    在开发中我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,下面这篇文章主要给大家介绍了关于如何快速上手Vue3过渡动画的相关资料,需要的朋友可以参考下
    2022-02-02
  • Vue3格式化Volar报错的原因分析与解决

    Vue3格式化Volar报错的原因分析与解决

    Volar 与vetur相同,volar是一个针对vue的vscode插件,下面这篇文章主要给大家介绍了关于Vue3格式化Volar报错的原因分析与解决方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • Vue中简单的虚拟DOM是什么样

    Vue中简单的虚拟DOM是什么样

    这些年写前端vue时经常碰到虚拟DOM这个单词,但都是听到就算了,左耳进右耳出,知道有这么个东西就完了,因为感觉也没有影响我实现公司的产品业务逻辑。今天在这里想花点时间探讨下虚拟DOM相关的知识,给自己补补课
    2022-10-10
  • 解决VUE中document.body.scrollTop为0的问题

    解决VUE中document.body.scrollTop为0的问题

    今天小编就为大家分享一篇解决VUE中document.body.scrollTop为0的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue 插件及浏览器本地存储

    Vue 插件及浏览器本地存储

    这篇文章主要介绍了Vue 插件及浏览器本地存储,插件通常用来为Vue添加全局功能,包含install方法的一个对象。更多相关介绍,需要的小伙伴可以参考下面文章内容
    2022-05-05
  • 如何写好一个vue组件,老夫的一年经验全在这了(推荐)

    如何写好一个vue组件,老夫的一年经验全在这了(推荐)

    这篇文章主要介绍了如何写好一个vue组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论