vue 中filter（过滤器）的使用

       今天修改bug过程中，看到前同事的项目代码中，发现定义了一个 fliters，很奇怪，这是啥？过滤器？网上查了一下确实叫vue自定义过滤器，初始我以为和js的Array中 filter()过滤器一样，过滤符合标准的变量之类的，结果看过vue的fliter文档之后发现似乎不仅仅是这样。

    最开始，我觉得，这算啥过滤器啊，这不应该叫数据处理器吗？为啥这么说，下面就来看看它的用法。

1、定义

 (1)全局定义：

Vue.filter('percentGet', function (val) {

  var str = Number(val * 100).toFixed(2)
          str += '%'
          return str

})

(2)局部定义：

      filters:{
        // 百分比处理
        percentGet (val) {
          let str = Number(val * 100).toFixed(2)
          str += '%'
          return str
        }
      },

   注意：全局注册时是filter。而组件过滤器是filters，写错不报错但过滤器无效果。

  简单介绍一下过滤器的定义的基本写法。下面先看一下调用方法，后面再结合特殊实例解释复杂定义和调用。

 

2、调用

(1)双花括号插值

{{weakRate | percentGet}}

(2)v-bind

输出结果，假如weakRate的值为 0.891 ，最后输出的结果则为 89.10% 

由此可见，调用的写法就是将 “ | ” 前方的变量作为参数，传递给后方的过滤器函数处理，过滤器函数的返回值则为最终结果。

 

3、复杂情况

(1) 

{{'Tom'|filterA|filterB}}

  filters:{
    filterA(val){
      return val+' love'
    },
    filterB(val){
      return val+' Jerry'
    }
  }

最终结果  “Tom love Jerry”

上述代码中，"Tom"是作为参数传给filterA 函数，而filterA 函数的返回值："Tom love"作为参数传给filterB函数，最终结果显示是由filterB返回的。

(2)

{{'Tom'|filterA('Jerry','Mary')}}

  filters:{
    filterA(val,person1,person2){
      return val+'love '+person1+' and '+person2
    }
  }

最终结果  “Tom love Jerry and Mary”

上述代码中，filterA的第一个参数是'Tom'，后面filterA('Jerry','Mary') 中 'Jerry'代表filterA函数中第二个参数，'Mary'代表第三个参数。

(3)

{{'Jerry','Mary'|filterA()}}

filters:{
        filterA(person1,person2){
          return 'Tom love '+person1+' and '+person2
        }
    }

最终结果 " Tom love Jerry and Mary "

上述代码表示'Jerry'和'Mary'分别作为参数传给filterB。

 

上面就是vue的 filter 的用法总结，从上文不难看出，基本都是对数据进行处理的，而且vue文档中也说：vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。本来就是用来对文本进行格式处理的。不过也确实能起到过滤器的作用，比如vue文档中的一个简单案例：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

vue文档

所以我认为，vue的过滤器，确实能起到过滤的作用，但是根本上还是用来进行数据格式处理的。、