Vue.js는 동적인 웹 인터페이스를 구축하기 위한 진보된 JavaScript 프레임워크입니다. 데이터를 변환하고 사용자에게 보여주는 방식을 커스터마이징할 수 있는 Vue 필터는 Vue 애플리케이션의 유용한 기능 중 하나입니다. 이 글에서는 Vue에서 사용자 정의 필터를 사용하고 생성하는 방법을 자세히 설명합니다.
필터란 무엇인가?
Vue에서 필터는 텍스트 형식화 작업을 위해 사용됩니다. 이는 데이터를 변환하거나 가공하지만, 원본 데이터를 수정하지 않으며, 주로 텍스트를 포맷팅할 때 사용됩니다. 예를 들어, 날짜 형식을 변경하거나, 텍스트를 대문자로 변환하는 등의 작업을 수행할 수 있습니다.
사용자 정의 필터 생성하기
Vue에서 사용자 정의 필터를 생성하는 것은 간단합니다. 컴포넌트 레벨 또는 글로벌 레벨에서 필터를 정의할 수 있습니다.
글로벌 필터 정의
|
1
2
3
4
5
|
Vue.filter(‘capitalize’, function(value) {
if (!value) return ”;
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
});
|
cs |
컴포넌트 필터 정의
|
1
2
3
4
5
6
7
|
filters: {
capitalize(value) {
if (!value) return ”;
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
|
cs |
필터 사용 예제
문자열 대문자 변환
|
1
2
3
4
5
6
7
8
|
// 필터 정의
Vue.filter(‘uppercase’, function(value) {
if (!value) return ”;
return value.toUpperCase();
});
// 사용 예
{{ message | uppercase }}
|
cs |
날짜 형식 변환
|
1
2
3
4
5
6
7
8
|
// 필터 정의
Vue.filter(‘formatDate’, function(value) {
if (!value) return ”;
return moment(value).format(‘YYYY-MM-DD’);
});
// 사용 예
{{ publishDate | formatDate }}
|
cs |
금액 형식 변환
|
1
2
3
4
5
6
7
8
9
10
|
// 필터 정의
Vue.filter(‘currency’, function(value) {
if (typeof value !== “number”) {
return value;
}
return ‘$’ + value.toFixed(2);
});
// 사용 예
{{ price | currency }}
|
cs |
Vue 필터는 Vue 애플리케이션에서 데이터를 쉽게 형식화하고 사용자에게 보여줄 수 있는 강력한 방법을 제공합니다. 사용자 정의 필터를 통해 개발자는 애플리케이션의 유연성을 높이고 코드의 재사용성을 개선할 수 있습니다. 이 글이 Vue 필터의 이해와 활용에 도움이 되길 바랍니다.
. Vue.js 필터 사용법, Vue 사용자 정의 필터 생성, Vue 필터 예제, Vue.js 데이터 형식화, Vue.js 텍스트 필터링