vue学习笔记：2.vue过滤器

vue过滤器

1. 过滤器的语法定义 ： Vue.filter(‘过滤器名称’, function() {});
注意：过滤器中的 function ， 第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据
2. 过滤器调用时的格式 ：{{ name | 过滤器名称 }}
3.全局过滤器和私有过滤器 ：-过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器
Html

<div id="app2">
   <h3>{{ dt | dateFormat() }}</h3>
</div>

JS
（1）定义全局过滤器

// 全局过滤器，进行时间格式化
Vue.filter('dateFormat', function(dateStr, pattern='') {
    // 根据给定的时间字符串，得到特定的时间
    var dt = new Date(dateStr);

    //yyyy-mm-dd
    var y = (dt.getFullYear()).toString().padStart(2, '0');
    var m = (dt.getMonth() + 1).toString().padStart(2, '0');
    var d = dt.getDate().toString().padStart(2, '0');

    // return y + '-' + m + '-' + d;
    
    if(pattern.toLowerCase() === 'yyyy-mm-dd') {
        return `${y}-${m}-${d}`;
    }else{
        var hh = dt.getHours().toString().padStart(2, '0');
        var mm = dt.getMinutes().toString().padStart(2, '0');
        var ss = dt.getSeconds().toString().padStart(2, '0');
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
    }
});

（2）定义私有过滤器

var vm2 = new Vue({
    el: '#app2',
     data: {
         dt: new Date()
     },
     filters: {  //定义私有过滤器   过滤器有两个条件   【过滤器名称 和 处理函数】
         // 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器
         dateFormat: function(dateStr, pattern='') {
             // 根据给定的时间字符串，得到特定的时间
             var dt = new Date(dateStr);

             //yyyy-mm-dd
             // String.padStart(2, '0') 补 0 的方法，只能用在字符串中，如果不是字符串，用 toString() 转换
             var y = dt.getFullYear();
             var m = (dt.getMonth() + 1).toString().padStart(2, '0');
             var d = (dt.getDate()).toString().padStart(2, '0');

             // return y + '-' + m + '-' + d;

             if(pattern.toLowerCase() === 'yyyy-mm-dd') {
                 return `${y}-${m}-${d}`;
             }else{
                 var hh = dt.getHours().toString().padStart(2, '0');
                 var mm = dt.getMinutes().toString().padStart(2, '0');
                 var ss = dt.getSeconds().toString().padStart(2, '0');
                 return `${y}-${m}-${d} ${hh}:${mm}:${ss}~~~~~~~`;
             }
         }
     }
 })