vue中的过滤器 filter

旧城等待， 2022-01-12 07:39 274阅读 0赞

**一、vue过滤器概念**

\+ 概念：Vue.js 允许你自定义过滤器，\*\*可被用作一些常见的文本格式化\*\*。  
\+ 过滤器可以用在两个地方：\*\*mustache 插值和 v-bind 表达式\*\*。  
\+ 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；  
\+ 做输出前，最后一层包装的处理。  
\+ 例如：list | 过滤器

**二、私有过滤器**

私有 `filters` 定义方式： 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用

filters: { 
        // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
        dataFormat(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}`;
          }
        }
      }

HTML元素：

<td>{
       {item.ctime | dataFormat('yyyy-mm-dd')}}</td>

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

**三、全局过滤器**

全局：所有的vue都可以使用。

// 定义一个全局过滤器
    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}`;
      }
    });

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