필터
Vue.js 필터(Filter)는 텍스트 형식을 변환하는 기능입니다. 텍스트 내용을 변환하여 화면에 출력할 때 사용하며, 변환 기능을 함수로 구현합니다. 필터를 등록하는 두 가지 방법이 있습니다.
- 전역 필터: Vue.filter()
전체 Vue.js 어플리케이션에서 사용 가능한 필터입니다. Vue.js 인스턴스 생성 시, filter 속성에 필터 함수를 정의하면 됩니다. - 지역 필터: 컴포넌트 내부에서 filters 프로퍼티 정의
Vue.js 필터는 템플릿 내부에서 적용할 필터의 이름을 파이프(|) 뒤에 추가하면 됩니다.
필터 정의
Vue.filter('dateFormat', function(value) {
if (value) {
return moment(String(value)).format('YYYY-MM-DD')
}
});
템플릿
Vue.js 필터는 템플릿 내부에서 파이프(|) 기호를 사용하여 적용됩니다.
<div>{{ date | dateFormat }}</div>
위 예제에서는 Vue.js 전역에 dateFormat 필터를 정의하고, moment 라이브러리를 사용하여 날짜 데이터를 변환하였습니다. 이후 템플릿 내부에서 date 변수를 dateFormat 필터를 사용하여 변환하였습니다.
Vue.js 필터는 유용한 기능 중 하나이며, 데이터를 적절하게 변환하여 화면에 표시하는데 사용할 수 있습니다. 필터는 사용자 정의 함수를 등록하고, 필요한 경우 매개변수를 전달하여 활용할 수 있습니다. 필터를 통해 데이터 변환 작업을 간편하게 처리할 수 있습니다.