Vue的过滤器，主要作用是将一个字符串（入参）通过一个过滤器函数来改变字符串的格式化显示，对原数据是没有影响的，主要是用在显示上。

1. 全局过滤器

定义全局过滤器，在所有引用此js的html的vm实例中都有效。

Vue.filter('过滤器名称',function(被过滤的参数，其他参数...){
   代码；   return 返回值
})

使用

<div id="app">
  {{msg | 过滤器名称(参数...)}}
</div>

全局过滤器的实例：定义一个日期的全局过滤器

window.onload = function () {
               //pattern格式化的样式，默认空字符，全部输出
               Vue.filter('dateFormat',function(datestr,pattern=""){
                   var dt = new Date(datestr);
                   var year = dt.getFullYear();
                   var month = dt.getMonth()+1;  //月份是从0开始的，因此要+1
                   month = month < 10 ? '0'+month : month;  //不足2位补足0
                   var day = dt.getDate();
                   day = day < 10 ? '0'+day : day;
                   var hour = dt.getHours();
                   hour = hour < 10 ? '0'+hour : hour;
                   var seconds = dt.getSeconds();
                   seconds = seconds < 10 ? '0'+seconds : seconds;
                   var minutes = dt.getMinutes();
                   minutes = minutes < 10 ? '0'+minutes : minutes;
        
                   if(pattern === 'yyyy-mm-dd'){
                       return year + "-" + month  + "-" + day;
                   }else {
                       return year  + "-" + month  + "-" + day + " " + hour  + ":" + seconds  + 
                                    ":" + minutes;
                   }
               })
              var vm = new Vue({
                  el:"#app",
                  data:{
                      cDate : new Date()
                  }
              })
        
        
       <div id="app">
         <h3>{{cDate | dateFormat()}}</h3>
       </div>
        
       <div id="app">
         <h3>{{cDate | dateFormat('yyyy-mm-dd')}}</h3>
       </div>

2.私有过滤器

定义在vm实例中，只在当前el元素的标签中有效

window.onload = function () {
               var vm = new Vue({
                   el: "#app",
                   data: {
                       cDate: new Date()
                   },
                   filters: {
                       dateFormat: function (datestr, pattern = "") {
                           var dt = new Date(datestr);
                           var year = dt.getFullYear();
                           var month = dt.getMonth() + 1;  //月份是从0开始的，因此要+1
                           month = month < 10 ? '0' + month : month;  //不足2位补足0
                           var day = dt.getDate();
                           day = day < 10 ? '0' + day : day;
                           var hour = dt.getHours();
                           hour = hour < 10 ? '0' + hour : hour;
                           var seconds = dt.getSeconds();
                           seconds = seconds < 10 ? '0' + seconds : seconds;
                           var minutes = dt.getMinutes();
                           minutes = minutes < 10 ? '0' + minutes : minutes;
        
                           if (pattern === 'yyyy-mm-dd') {
                               return year + "-" + month + "-" + day;
                           } else {
                               return year + "-" + month + "-" + day + " " + hour + ":" + 
                                      seconds + ":" + minutes;
                           }
                       }
                   }
               })
           }
        
       <div id="app">
         <h3>{{cDate | dateFormat()}}</h3>
       </div>
        
       <div id="app">
         <h3>{{cDate | dateFormat('yyyy-mm-dd')}}</h3>
       </div>

filter只在{{}}和v-bind中有效，此外，filter可以链式调用 {{ msg | filterA | filterB }}

str.padStart(maxlength,fillstr)：字符最大长度，不足在之前添加字符

str.padEnd(maxlength,fillstr)：字符最大长度，不足在之后添加字符

改写上面的逻辑：

var month = (dt.getMonth()+1).toString().padStart(2,'0');
var day = dt.getDate().toString().padStart(2,'0');
var hour = dt.getHours().toString().padStart(2,'0');
var seconds = dt.getSeconds().toString().padStart(2,'0');
var minutes = dt.getMinutes().toString().padStart(2,'0');