Vue.js 필터(Filters) 이용하여 날짜 형식 변환하기

필터

Vue.js 필터(Filter)는 텍스트 형식을 변환하는 기능입니다. 텍스트 내용을 변환하여 화면에 출력할 때 사용하며, 변환 기능을 함수로 구현합니다. 필터를 등록하는 두 가지 방법이 있습니다.

 

1. 전역 필터: Vue.filter()
   전체 Vue.js 어플리케이션에서 사용 가능한 필터입니다. Vue.js 인스턴스 생성 시, filter 속성에 필터 함수를 정의하면 됩니다.
2. 지역 필터: 컴포넌트 내부에서 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 필터는 유용한 기능 중 하나이며, 데이터를 적절하게 변환하여 화면에 표시하는데 사용할 수 있습니다. 필터는 사용자 정의 함수를 등록하고, 필요한 경우 매개변수를 전달하여 활용할 수 있습니다. 필터를 통해 데이터 변환 작업을 간편하게 처리할 수 있습니다.