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');