zoukankan      html  css  js  c++  java
  • 案例:使用过滤器格式化日期

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
          过滤器案例:格式化日期      
        */
        // Vue.filter('format', function(value, arg) {
        //   if(arg == 'yyyy-MM-dd') {
        //     var ret = '';
        //     ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
        //     return ret;
        //   }
        //   return value;
        // })
        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>
    <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
  • 相关阅读:
    大道至简第5 章 失败的过程也是过程读后感
    序列化组件之MoelSerializer
    序列化组件之Serializer
    DRF框架 生命周期 及五大模块源码分析
    Restful API 接口与规范
    Vue原理及核心
    Vue之路由跳转传参,插件安装与配置
    Vue项目搭建及环境配置
    Vue之组件
    Vue实例成员及事件
  • 原文地址:https://www.cnblogs.com/zcy9838/p/13099259.html
Copyright © 2011-2022 走看看