详谈Vue2.0的过滤器及其发生的变化

在学习Vue的过程中，很多情况下也用到了Vue的过滤器，为我们数据的处理带来了方便。在此记录一下过滤器的相关用法，以Vue.js的官网介绍为准。首先陈述一下Vue2.0的变化。

Vue2.0的过滤器发生了一些变化，具体大致如下：

1.  取消了所有的内置过滤器，即capitalize，uppercase，json等等。当然我们可以使用单独插件加入需要的过滤器。或者可以将1.0源码filters/目录下的index.js和array-filter.js中的内置过滤器的源码手动添加到2.0。
2. 取消了对v-model和v-on的支持，过滤器只能用在{{}}中。（2.1.0+ 开始支持 v-bind 表达式 ）。
3. 修改了过滤器参数的使用方式，采用函数的形式而不是空格来标记参数。如{{date | date 'yyy-MM-dd'}} ----->{{date | date ('yyy-MM-dd')}}

---

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

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

1.我们可以在一个组件的选项中定义本地的过滤器：

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message | capitalize}}</p>

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在本例中，capitalize 过滤器函数将会收到 message 的值作为第一个参数

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

结果如图：

2.我们也可以在创建 Vue 实例之前全局定义过滤器： 如官网的demo

3. 过滤器可以串联：

{{ message | filterA | filterB }}

filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

4.过滤器若是 JavaScript 函数，可以接收参数：

{{ message | filterA('arg1', arg2) }}

filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式arg2的值作为第三个参数。