vue过滤器

Vue提供数据过滤功能，使用也非常简单， 只需要在options下的 filters 下定义好filter函数便可使用，
过滤器可以用在两个地方：双花括号插值加粗样式和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

使用示例;

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

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

filters定义（记住filters 是有 s 的）：

filters: {
  capitalize: function (value) { //value便是接受过滤的值
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

以上是组件内使用过滤器，我们也可全局定义一个过滤器，这样我们便可全局使用：

全局过滤器：

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

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

参数：

过滤器可以传参，例如

{{ message | capitalize(a,b) }}

则在过滤器函数中， message便是作为第一个参数，a、b分别为第二、第三个参数

来源：CSDN

作者：柯剑烽

链接：https://blog.csdn.net/m0_37922914/article/details/104373208