Vue过滤器

1局部过滤器：

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

局部的就在组件里跟data同级定义filters对象，里面写键值对形式的过滤函数，这个过滤器就只有当前组件能用，模板里直接用管道符跟在要处理的值后面就行，组件里如果写了重名的局部过滤器，后写的会直接覆盖前面的。

2全局过滤器

Vue.filter('capitalize',function(value){if(!value)return''value=value.toString()returnvalue.charAt(0).toUpperCase()+value.slice(1)})newVue({// ...})

全局过滤器是在main.js里import之后、new
Vue之前，多次调用Vue.filter来定义，一次定义一个，不用额外配置，定义完所有组件都能直接用，要是全局和局部过滤器重名了，那局部的优先级更高，组件里会用局部的，全局的就被屏蔽了。

3过滤器使用

<!--在双花括号中-->{{message|capitalize}}<!--在`v-bind`中--><div v-bind:id="rawId | formatId"></div>//串联使用{{message|filterA|filterB}}

过滤器本质是函数，能串联使用，用多个管道符就行，会从左到右依次执行，前一个的返回值就是后一个的原始值。过滤器函数的第一个参数永远是模板里管道符左边的原始值，从第二个开始都是手动传的参数，还能按需传多个，第2、3、4个甚至更多都可以，函数里按顺序接收就行，传参数的目的就是让过滤逻辑更灵活通用，一个过滤器能适配多种场景。过滤器处理的都是要展示在模板上的值，最终页面显示的是过滤后的值，但不会改变data里的原始值，就是做展示层的格式化，而且过滤器不能通过refs、parent这些获取组件实例的方式调用，因为它没挂载到组件的this实例上，要是想复用过滤逻辑，要么抽成全局过滤器，要么单独抽成方法。另外组件里的filters是对象，键名唯一，不能重名，重名就会覆盖，全局过滤器也没有统一的配置对象，只能多次调用Vue.filter来加多个。