Vue.js中如何使用过滤器？

在 Vue.js 中,过滤器可以用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。

过滤器的定义方式:

js
// 全局过滤器
Vue.filter('myFilter', function (value) {
  // 返回处理后的值
})

// 局部过滤器  
filters: {
  'myFilter': function (value) {
    // 返回处理后的值
  }
}

使用过滤器的例子:

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

<!-- 在 v-bind 指令中 -->
<p v-bind:id="id | myFilter">...</p>

过滤器的示例代码:

js
// 全局过滤器
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

// 使用过滤器  
{{ message | capitalize }}

// 局部过滤器
filters: {
  'normalize': function (value) {
    return value.toLowerCase().replace(/\s+/g, '-')
  }  
} 

<p v-bind:id="id | normalize">...</p> 

过滤器的一些注意点:

1. 过滤器应该被添加在 JavaScript 表达式的尾部,由“|”符号指示。
2. 可以串联多个过滤器,按顺序调用。
3. 过滤器函数总接收表达式的值作为第一个参数。
4. 过滤器可以用于常见的数据格式化,但复杂的业务逻辑应在计算属性中实现。
5. 在组件选项中定义的本地的过滤器只作用于该组件及其子组件。

Vue.js 的过滤器为我们提供了一种方便的方式来格式化常见的文本和值。但是过度使用过滤器,也会使逻辑变得复杂难以理解。