[Vue+] Filter

Filter

Vue의 filter는 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능입니다.
예시를 들면 대문자, 다국어, 국제 통화 표시 등 다양하게 사용할 수 있습니다.

Filter 사용 방법

<div id="app">
	{{message | capitalize}}
</div>

new Vue({
	el: "#app",
    data() {
    	return {
        	message: "hello
        }
    },
    filters: {
    	capitalize: (val) => {
        	if(!val) return '';
            
            val = val.toString();
            return val.charAt(0).toUpeerCase() + val.slice(1);
        }
    }
})

위의 코드가 실행되면 원래는 hello가 나와야겠지만 filter가 적용되어 Hello가 출력되게 될 것입니다.

filter 등록 패턴

위와 같이 filter를 Component에 등록하여 사용하는 방법도 있지만 실제로 대부분은 filters.js 파일을 별도로 분리하여 사용합니다.

/* filters.js */
const capitalize = () => {
    
}

const translate = () => {
}

export default {
    capitalize, translate
}

/* main.js */
import * as filter from '@/assets/script/filters';

app.config.globalProperties.$filters = filter;