Vue中自定义过滤器及其使用

￡神魔★判官ぃ 2022-04-18 01:11 176阅读 0赞

过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器，过滤器通常会使用管道标志 “ | ”。使用:

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

**自定义全局过滤器**

虽然VueJs给我们提供了很多强有力的过滤器，但有时候还是不够。值得庆幸的，Vue给我们提供了一个干净简洁的方式来定义我们自己的过滤器，之后我们就可以利用管道 “ | ” 来完成过滤。

定义一个全局的自定义过滤器，需要使用`Vue.filter()`构造器。这个构造器需要两个参数。

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

**自定义私有过滤器**

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}`;
    
          }
    
        }
    
      }

知识量有限，在这里推荐一篇文章；需要更多了解的可以参考这篇文章：[http://www.cnblogs.com/kidney/p/6052935.html][http_www.cnblogs.com_kidney_p_6052935.html]

[http_www.cnblogs.com_kidney_p_6052935.html]: http://www.cnblogs.com/kidney/p/6052935.html