Vue Filter

뷰의 필터는 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능이다.

 

가장 간단하게는 단어의 대문자화부터 다국어, 국제 통화 표시 등 다양하게 사양할 수 있다.

 

필터의 사용법은 다음과 같다.

 

<div id="app">
  {{ message | capitalize }}
</div>

new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  filters: {
    capitalize: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

 

위의 코드를 실행하면 'Hello' 텍스트가 화면에 출력된다.

 

필터를 쓰지 않았다면 'hello'가 출력되었을 것이다.

 

 

 

위와 같이 filters 속성을 이용하여 각 컴포넌트에 필터를 등록하는 방법도 있지만, 실제로는 대부분 filters.js 파일을 별도로 분리하여 사용한다.

 

// filters.js
export function capitalize() {
  // ..
}

export function translate() {
  // ..
}

// main.js
import Vue from 'vue';
import * as filters from 'filters.js';

Object.keys(filters).forEach(function(key) {
  Vue.filter(key, filters[key]);
});

new Vue({
  // ..
})