MaoJiuBlog

主题

Have a clear structure

过滤器 ​

  • 过滤器常用于文本的格式化，可用在插值表达式和 v-bind 属性绑定。
  • 过滤器只在 vue 2.x 和 vue 1.x 中支持，vue 3.x 废弃了过滤器，官方建议使用计算属性或方法代替过滤器。

基本使用 ​

html
<!-- 在 JS 表达式尾部通过管道符进行调用-->
<p>{{ message | capitalize }}</p>

<div :id="rawId | formatId"></div>
js
// 定义私有过滤器
filters: {
  capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
  }
}
js
// 在 main.js 中定义全局过滤器
Vue.filter('capitalize', (str) => {
  return str.charAt(0).toUpperCase() + str.slice(1)
})

如果私有过滤器和全局过滤器冲突，按照就近原则调用私有过滤器。

连续调用多个过滤器 ​

过滤器从左往右调用，前一个过滤器的结果交给下一个过滤器继续处理。

html
<p>{{ text | capitalize | maxLength }}</p>

过滤器传参 ​

html
<p>{{ message | myFilter(arg1, arg2) }}</p>
js
// 第一个参数永远都是管道符前的值
Vue.filter('myFilter', (value, arg1, arg2) => {
  ...
})