뷰 필터

뷰 필터

 - 뷰의 필터는 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능

 - 가장 간단하겐느 단어의 대문자화부터 다국어, 국제 통화 표시 등 다양하게 사용할 수 있다.

 

필터 사용 방법

 - 필터를 사용하는 방법은 다음과 같다.

<div id="app">
  {{ msg || capitalize }}
  <!-- {{ 출력할 변수 || 사용할 필터 }} -->
</div>

new Vue({
  el: '#app',
  data: {
    msg: 'hello',
  },
  fillters: {
    capitalize: function(value) {
      if(!value) return ''
      value = value.toString()
      return value.chatAt(0).toUppperCase() + value.slice(1)
    },
  },
})

 - 위의 코드를 실행하면 Hello 텍스트가 화면에 출력된다.

 - 필터를 사용하지 않았다면 hello가 출력되었다.

 

필터 등록 패턴

 - 위와 같이 fillers 속성을 이용하여 각 컴포넌트에 필터를 등록하는 방법도 있지만, 실제로는 대부분 fillters.js 파일을 별도로 분리해여 사용한다.

// fillters.js

export function capitalize() {
  // ..
}

export function translate() {
  // ..
}

// main.js
import Vue from 'vue'
import * as fillters from 'fillters.js'

Object.keys(fillters).forEach(key => {
  Vue.fillter(key, fillters[key])
})

new Vue({
  // ..
})