vue+ts：全局过滤器和局部过滤器从注册到具体使用的详细过程

雨点打透心脏的1/2处 2023-01-23 06:59 2阅读 0赞

# 在Vue.js中Filter过滤器是什么 #

在Vue.js中Filter常用于拦截数据，对数据进行进一步处理和展示，分为全局过滤器和局部过滤器，在网页开发中，最常用到的是对时间的处理，比如我们创建个时间，new Date（）时间是中国标准时间（Tue Jul 13 2021 16:50:43 GMT+0800 (中国标准时间)）这样我们就可以通过使用过滤器处理展示为我们日常看到的时间格式：2021-07-13 16:50:43，

说到底，过滤器就是拦截数据对数据进行再次处理并返回数据，在Vue.js中常在**双花括号\{ \{\}\}插值和 `v-bind` 表达式进行使用，**

# 全局过滤器 #

**创建getglobalFilter.ts全局过滤器文件（文件名字可以自己随便定义）**

//首先在文件中引入Vue
    import Vue from 'vue';
    //以下为全局过滤器的定义（可以定义多个）
    Vue.filter('globalFilter', function(value: any) {
      return value+'我是全局过滤器';
    });
    
    Vue.filter('globalFilter1', function(value: any) {
      return value+'我是全局过滤器1';
    });

**在main.ts文件里导入刚才定义的全局过滤器getglobalFilter文件**

//导入需注册的全局过滤器的文件
    import '@/views/unlawful-record/test/globalFilter';

**导入完成就可以在页面中直接调用过滤器的名字进行使用**

//定义一个变量
      getglobalFilter: string ='调用全局过滤器-----'  
      //页面使用
      <div>
          <h1>全局过滤器</h1>
          <p>{
       {getglobalFilter | globalFilter}}</p>
      </div>

# 局部过滤器 #

**局部过滤器可以在@Component里面的filters里进行定义**

**在页面中调用**

<div>
          <h1>局部过滤器</h1>
          <p>{
       { currentTime }}</p>
          <p>使用局部过滤器处理时间:{
       { currentTime | localFilter }}</p>
          
        </div>

# 过滤器实现效果： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70]: /images/20221004/34d69af97e124c24ac00bf451bc3e884.png