Vue中filter过滤器的使用方法

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

   

    

     

      

     
     

      

       <!-- 在双花括号中 -->
      
     
    

     

      

     
     

      

       {{ message | capitalize }}
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       <!-- 在 `v-bind` 中 -->
      
     
    

     

      

     
     

      

       <div v-bind:id="rawId | formatId"></div>
      
     
   
  

我们先看上面的官方解释，也可以简单理解为过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。

过滤器分为两种：

• 局部过滤器：只允许在当前组件中使用

• 全局过滤器：所有组件都可以使用
  

局部过滤器

定义也很简单，先来说下组件内的过滤器。

   

    

     

      

     
     

      

       export default {
      
     
    

     

      

     
     

      

           data () {
      
     
    

     

      

     
     

      

               return {
      
     
    

     

      

     
     

      

                   msg: 'hello world'
      
     
    

     

      

     
     

      

               }
      
     
    

     

      

     
     

      

           },
      
     
    

     

      

     
     

      

           //定义局部过滤器。只能在当前 vue 对象中使用
      
     
    

     

      

     
     

      

           filters: {
      
     
    

     

      

     
     

      

               dataFormat: (msg, a) => { // msg表示要过滤的数据，a表示传入的参数
      
     
    

     

      

     
     

      

                   return msg + a;
      
     
    

     

      

     
     

      

               }
      
     
    

     

      

     
     

      

           }
      
     
    

     

      

     
     

      

       }
      
     
   
  

组件使用方法

<p>{{ msg | dataFormat('!')}}</p>
  

这里面有几个注意的点

• 当全局过滤器和局部过滤器重名时，会采用局部过滤器，即：局部过滤器优先于全局过滤器被调用

• 一个表达式可以使用多个过滤器，其执行顺序从左往右，前一个过滤器的结果作为后一个过滤器的被处理数据，所以要注意使用顺序

全局过滤器

全局过滤器我们使用Vue脚手架搭建的项目作为演示

一般我们会把一些通用的方法封装到一个js文件，这里我们也一样，有个utils.js文件，导出两个方法

   

    

     

      

     
     

      

       export const dataFormat = (val) => {
      
     
    

     

      

     
     

      

           // 里面是逻辑，这里简单返回
      
     
    

     

      

     
     

      

           return val + "!"
      
     
    

     

      

     
     

      

       }
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       export const dataFormat1 = (val) => {
      
     
    

     

      

     
     

      

           // 里面是逻辑，这里简单返回
      
     
    

     

      

     
     

      

           return val + "!!!"
      
     
    

     

      

     
     

      

       }
      
     
   
  

在 main.js文件中引用（假设utils.js文件和main.js文件同目录）

   

    

     

      

     
     

      

       // 过滤器
      
     
    

     

      

     
     

      

       import * as filters from './utils'
      
     
    

     

      

     
     

      

       Object.keys(filters).forEach(key => {
      
     
    

     

      

     
     

      

           Vue.filter(key, filters[key])
      
     
    

     

      

     
     

      

       })
      
     
   
  

在项目任意组件使用

   

    

     

      

     
     

      

       <!-- 在双花括号中 -->
      
     
    

     

      

     
     

      

       <p>{{ msg | dataFormat}}</p> 
      
     
    

     

      

     
     

      
 
      
     
    

     

      

     
     

      

       <!-- 在 `v-bind` 中 -->
      
     
    

     

      

     
     

      

       <div v-bind:id="msg | dataFormat"></div>
      
     
   
  

全局的过滤器要比局部过滤器使用的更广泛一些，说白了我们为什么要使用过滤器，其实就跟使用函数是一样，我们想把一些方法封装，供其它组件使用，这样调用起来方便，开发更快捷。