46 파이프 필터

source: categories/study/vue-experiance/vue-experiance_9-36.md

1. 필터

Vue는 텍스트 형식화를 적용할 수 있는 필터를 지원합니다.
이 필터들은 중괄호 보간법 혹은 v-bind표현법을 이용할 때 사용가능합니다. (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)
  }
}

또는 다음과 같이 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값을 받을 것이고 filterA가 message와 함께 실행된 결과가 filterB에 넘겨질 것입니다.

필터는 기본적으로 자바스크립트 함수이기 때문에 두개 이상의 인수를 받을 수 있습니다.

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

여기서 filterA는 세개의 인수를 받는 함수로 정의되었습니다.

1. message의 값은 첫번째 인수로 전달될 것이며,
2. 순수 문자열인 'arg1'은 두번째 인수로 전달될 것이며,
3. 자바스크립트 표현식인 arg2는 표현식이 실행된 이후에 세번째 인수로 전달될 것입니다.