Vue.js的过滤器怎么使用

这篇文章主要介绍了Vue.js的过滤器怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue.js的过滤器怎么使用文章都会有所收获，下面我们一起来看看吧。

一、过滤器作用

过滤器用于进行文本内容格式化处理。

二、过滤器的使用方式

过滤器可以在插值表达式和 v-bind 中使用。

三、过滤器的分类

• 全局过滤器

• 局部过滤器

四、全局过滤器

全局过滤器可以在任意Vue实例中使用。

语法书写方式如下：

Vue.filter('过滤器名称'，function(value) {        //逻辑代码        return '处理结果';})

注意：示例中的 | 竖线表示管道符。

          
    
这是标签
    
{{ value | filterA }}
  
  
    
这是标签
    
{{ value | filter}}
  
    

• 全局过滤器可以将一个数据传入到多个过滤器中进行处理。

  
    
{{ value | filterA | filterB }}
  
    

• 一个过滤器可以传入多个参数。

  
        
{{ value | filterC('TGW-',200)}}
  
    

五、局部过滤器

• 局部过滤器只能在当前 Vue 实例中使用。其他的Vue实例中无法访问。

    
{{ content | filterA }}
    
{{ content2 | filterA }}
    
{{ content | filterA | filterB }}
    
{{ content | filterA | filterC('TGW-')}}
  
      

六、全局过滤器和局部过滤器重名现象

当我们出现全局过滤器和局部过滤器名字一样时，那么我们再执行的时候，是按照就近原则进行执行的，所以执行的是局部过滤器的代码块。

  
    
{{ content | filterA }}
  
    

关于"Vue.js的过滤器怎么使用"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"Vue.js的过滤器怎么使用"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。