Vue过滤器 - 技术栈

文章目录

1局部过滤器：

javascript 复制代码

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

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

2全局过滤器

javascript 复制代码

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

new Vue({
  // ...
})

全局过滤器是在main.js里import之后、new

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

3过滤器使用

javascript 复制代码

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

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

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