[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를 만들어 사용 가능

 

 

참조

Vue.js 2 Cookbook