Vue.js의 필터는 데이터 표시 형식을 지정하는 데 사용되며, 주로 간단한 로직 처리에 적합합니다. 필터는 원본 데이터를 변경하지 않고 변환된 새로운 데이터를 생성합니다.

필터는 다음과 같은 두 가지 방식으로 등록하고 사용할 수 있습니다:

• 등록: Vue.filter('필터명', 콜백함수) 또는 Vue 인스턴스 내 filters: {} 객체를 통해 등록합니다.
• 사용: 템플릿 내에서 {{ 데이터 | 필터명 }} 또는 v-bind:속성="데이터 | 필터명" 구문을 사용합니다.

필터는 추가 인자를 받을 수 있으며, 여러 필터를 연속적으로 연결하여 사용할 수도 있습니다.

이 예제에서는 날짜 및 시간 처리를 위해 day.js 라이브러리를 사용합니다. day.js는 Moment.js와 유사한 API를 제공하는 경량 JavaScript 라이브러리입니다.

예제 코드:

HTML:

<div id="app">
    <h2>시간 형식 변환 예제</h2>
    <p>계산 속성: {{ formattedTimeComputed }}</p>
    <p>메서드: {{ formatTimeMethod() }}</p>

    <h3>지역 필터 (인자 없음): {{ timestamp | formatDate }}</h3>
    <h3>지역 필터 (인자 있음): {{ timestamp | formatDate('YYYY/MM/DD') }}</h3>
    <h3>지역 필터 (연결): {{ timestamp | formatDate | truncateText }}</h3>

    <h3>전역 필터 (연결): {{ timestamp | formatDate | truncateTextGlobal }}</h3>
</div>

JavaScript:

// 전역 필터 등록
Vue.filter('truncateTextGlobal', function(value) {
    if (!value) return '';
    return value.substring(0, 10); // 처음 10글자만 반환
});

new Vue({
    el: '#app',
    data: {
        timestamp: 1678886400000 // 예시 타임스탬프
    },
    computed: {
        formattedTimeComputed() {
            return dayjs(this.timestamp).format('YYYY년 MM월 DD일 HH:mm:ss');
        }
    },
    methods: {
        formatTimeMethod() {
            return dayjs(this.timestamp).format('YYYY년 MM월 DD일 HH:mm:ss');
        }
    },
    filters: {
        // 지역 필터: 날짜 형식 지정
        formatDate(value, formatString = 'YYYY년 MM월 DD일 HH:mm:ss') {
            return dayjs(value).format(formatString);
        },
        // 지역 필터: 텍스트 자르기
        truncateText(value) {
            if (!value) return '';
            return value.substring(0, 8); // 처음 8글자만 반환
        }
    }
});

필요한 라이브러리 추가:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>