vue使用过滤器格式化日期

 更新时间:2021年01月20日 11:45:00   作者:河软小宝  
这篇文章主要为大家详细介绍了vue使用过滤器格式化日期,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue使用过滤器格式化日期的具体代码,供大家参考,具体内容如下

案例要求

案例讲解

1、查看未过滤格式化的日期格式
2、设置模板函数format 接收日期值和日期格式
3、按照日期格式对日期进行拼接并返回值
4、将拼接好的日期显示在页面上

最终案例效果

代码

设置日期显示格式

<div id="app">
    <div>{{date }}</div>
    <div>{{date | format('yyyy-MM-dd')}}</div>
    <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
    <div>{{date | format('yyyy-MM-dd hh:mm:ss:S')}}</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    // Vue.filter('format', function (value, arg) {
    //   // console.log(arg);
    //   if (arg == 'yyyy-MM-dd') {
    //     var ret = '';
    //     ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
    //     return ret;
    //   }
    // })
    Vue.filter('format', function (value, arg) {
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d +)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒

        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v != undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }
      return dateFormat(value, arg);
    })
    var vm = new Vue({
      el: "#app",
      data: {
        date: new Date(),
      },

    });
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue计时器的实现方法

    vue计时器的实现方法

    这篇文章主要为大家详细介绍了vue计时器的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue组件之极简的地址选择器的实现

    Vue组件之极简的地址选择器的实现

    这篇文章主要介绍了Vue组件之极简的地址选择器的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue解决使用webpack打包后keep-alive不生效的方法

    vue解决使用webpack打包后keep-alive不生效的方法

    今天小编就为大家分享一篇vue解决使用webpack打包后keep-alive不生效的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue.js动态添加、删除选题的实例代码

    Vue.js动态添加、删除选题的实例代码

    这篇文章主要介绍了Vue.js动态添加、删除选题的实例代码,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • vue-element-admin如何转换成中文

    vue-element-admin如何转换成中文

    这篇文章主要介绍了vue-element-admin如何转换成中文问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 手动挂载Vue3.0组件到DOM节点的方法

    手动挂载Vue3.0组件到DOM节点的方法

    在VUE应用中,经常会使用一些非vue实现的js库,这些js库可能要求外部传入一些界面DOM节点,本文主要介绍了手动挂载Vue3.0组件到DOM节点的方法,感兴趣的可以了解一下
    2024-08-08
  • vue3项目如何国际化实战指南

    vue3项目如何国际化实战指南

    像很多大型的网址,特别是跨国际等公司网页,访问来自世界各地用户,所以网页的国际化极其重要的需求,下面这篇文章主要给大家介绍了关于vue3项目如何国际化的相关资料,需要的朋友可以参考下
    2022-09-09
  • vue-cli3 打包优化之 splitchunks详解

    vue-cli3 打包优化之 splitchunks详解

    这篇文章主要介绍了vue-cli3 打包优化之 splitchunks的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • Vue项目在IE浏览器的兼容问题及解决方法

    Vue项目在IE浏览器的兼容问题及解决方法

    该文章主要介绍了如何在Vue项目中解决IE浏览器的兼容性问题,包括解决IE不兼容axios的Promise对象、ES6语法以及polyfill的使用方法,通过配置babel-polyfill、es6-promise和转ES5语法,解决了在IE浏览器中常见的兼容性问题,需要的朋友可以参考下
    2025-01-01
  • 基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)

    基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)

    为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选择使用 Vue.js,以及基于它构建的 iView UI 框架。本文给大家分享基于 Vue.js 之 iView UI 框架非工程化实践记录,需要的朋友参考下吧
    2017-11-11

最新评论