필터
필터는 이중 중괄호 보간 및 v-bind 표현식 두 곳에서 사용할 수 있습니다(후자는 2.1.0+부터 지원됩니다). 필터는 "파이프" 기호로 표시된 JavaScript 표현식 끝에 추가되어야 합니다: v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
<!-- 在双花括号中 -->
{{ 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)
}
}或者在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})当全局过滤器和局部过滤器重名时，会采用局部过滤器。
下面这个例子用到了 capitalize 过滤器：
过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。
过滤器可以串联：
{{ message | filterA | filterB }}在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
过滤器是 JavaScript 函数，因此可以接收参数：
{{ message | filterA('arg1', arg2) }}这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2rrreee
rrreee
또는 Vue 인스턴스를 생성하기 전에 전역적으로 필터를 정의할 수 있습니다:
rrreee
글로벌 필터와 로컬 필터의 이름이 같을 경우 로컬 필터가 사용됩니다. 🎜🎜다음 예에서는capitalize 필터를 사용합니다. 🎜🎜🎜🎜필터 함수는 항상 표현식의 값(이전 작업 체인의 결과)을 첫 번째 매개변수로 받습니다. 위의 예에서 capitalize 필터 함수는 message 값을 첫 번째 매개변수로 받습니다. 🎜🎜필터는 다음과 같이 연결될 수 있습니다. 🎜rrreee🎜이 예에서 filterA는 단일 매개변수를 받는 필터 함수로 정의되며 message 표현식의 값은 다음과 같습니다. 함수에 매개변수로 전달됩니다. 그런 다음 단일 매개변수를 수신하도록 정의된 필터 함수 filterB를 계속 호출하여 filterA의 결과를 filterB에 전달합니다. 🎜🎜필터는 JavaScript 함수이므로 매개변수를 받을 수 있습니다. 🎜rrreee🎜여기서 filterA는 세 개의 매개변수를 받는 필터 함수로 정의됩니다. message의 값은 첫 번째 매개변수로 사용되고, 일반 문자열 'arg1'은 두 번째 매개변수로 사용되며, 표현식 arg2가 두 번째 매개변수로 사용됩니다. 🎜🎜🎜🎜🎜 🎜
