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过滤器filter
• Vue过滤器,生命周期函数和vue-resource简单介绍
• Vue3不支持Filters过滤器的问题
• Vue封装全局过滤器Filters的步骤
• Vue filter 过滤器、以及在table中的使用介绍
• vue 将多个过滤器封装到一个文件中的代码详解
• vue通过过滤器实现数据格式化
• vue过滤器实现日期格式化的案例分析
• 详解Vue串联过滤器的使用场景
• vue中的过滤器及其时间格式化问题
• 过滤器vue.filters的使用方法实现
• vue3删除过滤器的原因

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！