Vue初学教程之过滤器

简介

过滤器（Filters）提供了一种 执行文本转换的方法，比如说都转换成大写字母或者几乎做任何我们想做的事情。
过滤器既可以在双花括号插值中使用，也可以在v-bind 指令的表达式中使用

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

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

注意：
Vue 中的过滤器 不能替代 methods、computed 或者 watch，因为过滤器 不改变真正的 data，而只是改变渲染的结果，并返回过滤后的版本
应用场景：
比如尽可能保持API响应的干净，并在前端处理数据的格式；
避免重复和连接的情况下，也可以有效地封装成可重用代码块背后的所有逻辑

过滤器类型

Vue 有两种不同的方式注册过滤器：①本地过滤器②全局过滤器。你可以跨所有组件访问全局过滤器，而本地过滤器只允许你在其定义的组件内部使用。
【当全局过滤器和局部过滤器重名时，会采用局部过滤器。】
①本地过滤器
可以在一个组件的选项中定义本地的过滤器：

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

②全局过滤器
创建 Vue 实例之前全局定义过滤器：

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

new Vue({
  // ...
})