[Javascript] VueJS Filter
VueJS Filter를 이용한 Acronym Dictionary 기능 만들기
VueJS Data Biding Variable 사용법#
Javascript#
Vue 객체에 데이터 바인딩된 변수를 정의한다.
new Vue({
el: '#app',
data: {
cat: 'navi'
}
})
HTML#
VueJS에서 데이터 바인딩된 변수를 HTML 상에서 사용하고 싶을 때는 {{ }} 를 감싸서 사용한다.
<div id="app">
{{ cat }}
</div>
VueJS Filter 사용법#
VueJS에서는 Text Filter를 손쉽게 정의해서 사용 가능하다.
index.js에 선언된 Vue 객체에 filter 함수를 선언하고 filter 이름과 콜백함수를 선언하면 text filter가 생성된다.
Javascript
let AcronymDictionary = {
EU: "European Union",
US: "United States of America",
CN: "China",
PH: "Philippines",
}
// 첫번째 인자 값은 filter의 이름
// 두번째 인자는 실행할 filter의 함수
Vue.filter('acronymInterpreter', function (original) {
let modified = original;
// input data(original)이 미리 정의된 JSON 객체의 key 값으로 존재하는지 확인
// 값이 존재하면 value 값을 반환
if(AcronymDictionary[original]) { modified = AcronymDictionary[original]; }
return modified;
})
new Vue({
el: '#app',
data: {
acronym : "EU"
}
})
HTML
데이터 바인딩 변수 | filter 이름 으로 선언.
filter callback 함수의 인자로 선언한 변수가 입력됩니다.
<div id="app">
<p>{{ acronym | acronymInterpreter }}</p>
</div>JSFiddle 실행 화면
Vue 객체에 데이터를 바인딩하는 변수 acronym에 EU를 선언해서 화면에는 filter가 적용되어서 European Union 이라는 Text가 출력된다.
결론
Vue 객체의 Filter 기능을 통해 손쉽게 Formatter를 만들어 사용 가능