vue--过滤器(私有，全局)

过滤器

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

私有过滤器

1. HTML元素：

​
{{item.ctime | dataFormat('yyyy-mm-dd')}}
​

"en">


  "UTF-8">
  "viewport" content="width=device-width, initial-scale=1.0">
  "X-UA-Compatible" content="ie=edge">
  
  



  
"app">
    
{{ msg | msgFormat('疯狂+1', '123') | test }}
  

  

 

2. 私有 filters 定义方式：

​
filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
​
   dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
​
     var dt = new Date(input);
​
     // 获取年月日
​
     var y = dt.getFullYear();
​
     var m = (dt.getMonth() + 1).toString().padStart(2, '0');
​
     var d = dt.getDate().toString().padStart(2, '0');
​
​
​
     // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
​
     // 否则，就返回 年-月-日 时：分：秒
​
     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}`;
​
     }
​
   }
​
 }
​

 

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；

 

 

全局过滤器

​
// 定义一个全局过滤器
​
Vue.filter('dataFormat', function (input, pattern = '') {
​
 var dt = new Date(input);
​
 // 获取年月日
​
 var y = dt.getFullYear();
​
 var m = (dt.getMonth() + 1).toString().padStart(2, '0');
​
 var d = dt.getDate().toString().padStart(2, '0');
​
​
​
 // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
​
 // 否则，就返回 年-月-日 时：分：秒
​
 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}`;
​
 }
​
});
​

 

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！