Vue에서 Filters 사용방법

개인적으로 React에서 아쉬운 부분이 Angular,Vue에서의 Template기능입니다.
Template에서 Filters를 사용하면 Render과정에서 원본 데이터의 변화없이 출력할 수 있어 간단하게 화면을 조작할 수 있습니다.

Global Filters

Global Filters는 전체 components에서 사용가능합니다.
Global Filters 등록은 반드시 메인 Vue Instance 위에 작성을 해야합니다.

/src/main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.filter('addText', function (value) {
  return `${value} Add Text Global Filters`;
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
})

/src/components/Hello.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div class="hello">
    <h1>{{ msg | addText}}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped>
  ...
</style>

Local Filters

Local Filters는 해당 component에서만 사용할 수 있습니다.
사용방법은 해당 component에 filters를 등록 후 사용하면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div class="hello">
    <h1>{{ msg | addLocalText}}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  filters: {
    addLocalText() {
      return `${value} Add Text Local Filters`;
    }
  }
}
</script>

<style scoped>
  ...
</style>

여러 Filters를 Pipe( | )를 통해 같이 사용 가능

1
2
3
4
5
<template>
  <div class="hello">
    <h1>{{ msg | addLocalText | addText}}</h1>
  </div>
</template>

Filters에 다중 파라미터 작성 가능

1
2
3
Vue.filter('addText', function (value, second, third) {
  return `${value} Add Text Global Filters ${second} ${third}`;
});

Resource