vue.js过滤器

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

在双花括号中写法

{{item | call }}
// 前一个的值是后一个的第一个参数

在 v-bind 中写法

<div v-bind:id="wrap | call"></div>

定义本地过滤器的方法

filters: {
    call(val) {
        return val.replace(/top/, '')
    }
}

定义全局过滤器的方法

Vue.filter('call', function (value) {
  return val.toUpperCase();
})

new Vue({
  // ...
})

当全局过滤器和局部过滤器重名时，会采用局部过滤器

之前说了前一个的值会作为后一个的第一个参数，也表示着过滤器可以串联例如

{{ item | call1 | call2 }}
// item的值作为参数传到函数call1然后执行返回的值又作为参数传到函数call2中

这里call1、call2都是过滤函数他们也可以以call1(arg1,arg2)的形式传参，那么item即为第一个参数，arg1的值为第二个参数，arg2的值为第三个参数，如下：

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