Vue入门指南——过滤器

深藏阁楼爱情的钟 2023-07-02 07:28 6阅读 0赞

### 目录： ###

*   *  一、过滤器的作用是什么？
     *  二、自定义全局过滤器
     *  三、 全局过滤器的使用
     *  四、局部过滤器
     *  五、带参数的过滤器
     *  六、带参过滤器的使用
     *  七、注意事项

## 一、过滤器的作用是什么？ ##

格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等

## 二、自定义全局过滤器 ##

过滤器中的 function 里的第一个参数，已经被规定死了，永远都是 过滤器 管道符前面传递过来的数据。

Vue.filter(‘过滤器名称’, function(value){ 
    	// 过滤器业务逻辑
    })

## 三、 全局过滤器的使用 ##

过滤器可以用在两个地方： 插值表达式 和 v-bind 表达式。

<div>{ { msg | upper}}</div> 
    <div>{ { msg | upper | lower}}</div> 
    <div v-bind:id=“id | formatId"></div>

--------------------

// 定义一个全局过滤器
    
    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:{ 
    	capitalize: function(){ }
    }

--------------------

1.  HTML元素：

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

1.  私有 `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}`;
    
          }
    
        }
    
      }

## 五、带参数的过滤器 ##

Vue.filter(‘format’, function(value, arg1){ 
    	// arg1就是过滤器传递过来的参数
    })

## 六、带参过滤器的使用 ##

<div>{ { date | format(‘yyyy-MM-dd')}}</div>

## 七、注意事项 ##

*  过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示。
 *  过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。
 *  全局注册时是filter，没有s的。而局部过滤器是filters，是有s的。
 *  当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

--------------------

如果您也正在学习前端的路上，记得关注该博主，学习更多关于前端的知识~

[博主主页 Poetic Code][Poetic Code]

[Poetic Code]: https://blog.csdn.net/weixin_44253336