[Vue.JS] 필터

1. 필터 사용방법

Vue는 텍스트 형식화 할 수 있는 필터 기능을 제공합니다. 필터는 중괄호 보간법, v-bind 표현법(2.1.0+ 부터)에서 사용 할 수 있습니다. 필터는 JavaScript 표현식 마지막의 파이프(|) 기호와 함께 사용해야 합니다.

<!-- in mustaches -->
{{ message | capitalize }}

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

2. 로컬 필터 정의

컴포넌트의 옵션으로 로컬 필터를 정의할 수 있습니다.

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

3. 전역 필터 정의

Vue 인스턴스 생성 전(new Vue() 전)에 전역으로 필터를 정의할 수 있습니다.

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

new Vue({
  // ...
})

4. 필터 체이닝

필터 함수의 첫번째 전달인자는 JavaScript의 표현식의 값입니다. 위의 예제의 capitalize 필터 함수의 첫번째 전달인자의 값은 message의 값입니다. 필터는 연결될 수 있습니다.

{{ message | filterA | filterB }}

위의 코드의 경우에 filterA의 전달인자는 message이고, filterB의 전달인자는 filterA의 결과 값(filterA 함수가 message의 전달인자로 계산되어진 값)이 됩니다.

5. 필터 함수 전달인자

필터 함수는 일반적인 JavaScript 함수이기 때문에 두개 이상의 전달 인자를 가질 수 있습니다.

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

위의 코드의 filterA 필터 함수는 3개의 전달 인자를 가지는 함수 입니다. 첫번째 전달인자는 message의 값이고, 두번째 전달인자는 'arg1'이라는 문자열입니다. 세번째 전달인자는 arg2 변수의 값을 전달인자로 가집니다.

참고

• https://kr.vuejs.org/v2/guide/filters.html