过滤器

过滤器 |，常用于文本的格式化，过滤器可以用在两个地方：

• 1.双括号插值里面 {{}}
• 2.v-bind表达式 (2.1.0+)

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

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

在组件的选项中定义本地的过滤器

filters: {
  capitalize: function (value) {
    if (!value) return '';
    value = value.toString();
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
// 这里可以使用 css的 text-transform属性，设置值为capitalize
// 参考：https://www.yuque.com/guoqzuo/piylht/xd5io5#f4fa85ed

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

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

new Vue({
  // ...
})

过滤器串联

从左到右执行

{{ message | filterA | filterB }}

过滤函数接收参数

其中filter函数的第一个参数为message的值，第二个参数为arg1，第三个参数为arg2

{{ message | filterA('arg1', arg2) }}