核心内容摘要
黑黄交织的视觉盛宴：当“黄三色”遇上“黑三色”
文章目录1局部过滤器2全局过滤器3过滤器使用1局部过滤器filters:{capitalize:function(value){if(!value)returnvaluevalue.toString()returnvalue.charAt(
.toUpperCase()value.slice(
}}局部的就在组件里跟data同级定义filters对象里面写键值对形式的过滤函数这个过滤器就只有当前组件能用模板里直接用管道符跟在要处理的值后面就行组件里如果写了重名的局部过滤器后写的会直接覆盖前面的。
2全局过滤器Vue.filter(capitalize,function(value){if(!value)returnvaluevalue.toString()returnvalue.charAt(
.toUpperCase()value.slice(
})newVue({// ...})全局过滤器是在main.js里import之后、newVue之前多次调用Vue.filter来定义一次定义一个不用额外配置定义完所有组件都能直接用要是全局和局部过滤器重名了那局部的优先级更高组件里会用局部的全局的就被屏蔽了。
3过滤器使用!--在双花括号中--!--在v-bind中--div v-bind:idrawId | formatId/div//串联使用过滤器本质是函数能串联使用用多个管道符就行会从左到右依次执行前一个的返回值就是后一个的原始值。
过滤器函数的第一个参数永远是模板里管道符左边的原始值从第二个开始都是手动传的参数还能按需传多个第
2、
4个甚至更多都可以函数里按顺序接收就行传参数的目的就是让过滤逻辑更灵活通用一个过滤器能适配多种场景。
过滤器处理的都是要展示在模板上的值最终页面显示的是过滤后的值但不会改变data里的原始值就是做展示层的格式化而且过滤器不能通过refs、parent这些获取组件实例的方式调用因为它没挂载到组件的this实例上要是想复用过滤逻辑要么抽成全局过滤器要么单独抽成方法。
另外组件里的filters是对象键名唯一不能重名重名就会覆盖全局过滤器也没有统一的配置对象只能多次调用Vue.filter来加多个。