vue的自定义过滤器

vue的自定义过滤器

过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。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}`;
 
      }
 
    }
 
  }