Vue.js 필터(Filter) 사용 예제 10가지

by

Vue.js는 데이터를 화면에 표시할 때 그 데이터를 가공하거나 포맷팅할 수 있는 강력한 기능을 제공합니다. 이러한 기능을 Vue.js 필터(Filter)라고 합니다. 이 블로그 포스팅에서는 Vue.js 필터를 사용한 다양한 예제를 살펴보겠습니다.


1. 숫자에 천 단위 콤마 추가하기

Vue.filter('addCommas', function(value) {
  if (!value) return '';
  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
});


2. 소수점 두 자리까지 표시하기

Vue.filter('formatDecimal', function(value) {
  if (!value) return '';
  return parseFloat(value).toFixed(2);
});


3. 날짜를 “YYYY년 MM월 DD일” 형식으로 변환하기

Vue.filter('formatDate', function(value) {
  if (!value) return '';
  const date = new Date(value);
  return date.toLocaleDateString('ko-KR');
});


4. 문자열을 대문자로 변환하기

Vue.filter('uppercase', function(value) {
  if (!value) return '';
  return value.toUpperCase();
});


5. 문자열을 줄 바꿈으로 나누어 배열로 반환하기

Vue.filter('splitLines', function(value) {
  if (!value) return [];
  return value.split('\n');
});


6. 문자열 자르고 “…” 추가하기

Vue.filter('truncate', function(value, length) {
  if (!value) return '';
  if (value.length <= length) return value;
  return value.substring(0, length) + '...';
});


7. 금액을 통화 형식으로 표시하기

Vue.filter('formatCurrency', function(value) {
  if (!value) return '';
  return '$' + value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
});


8. 숫자를 백분율로 변환하기

Vue.filter('toPercentage', function(value) {
  if (!value) return '';
  return (parseFloat(value) * 100).toFixed(2) + '%';
});


9. 배열을 쉼표로 연결된 문자열로 변환하기

Vue.filter('arrayToString', function(value) {
  if (!value || !Array.isArray(value)) return '';
  return value.join(', ');
});


10. HTML 특수 문자를 이스케이프하기

Vue.filter('escapeHtml', function(value) {
  if (!value) return '';
  const div = document.createElement('div');
  div.appendChild(document.createTextNode(value));
  return div.innerHTML;
});

Vue.js 필터를 사용하면 데이터를 화면에 표시하기 전에 원하는 형식으로 가공하거나 포맷팅할 수 있습니다. 이러한 필터는 Vue.js 애플리케이션에서 데이터를 더 다양한 방식으로 가공하고 표시하는 데 유용한 도구입니다.



Leave a Comment