filter

Vue 필터 사용해보기

사용하기

<!-- 중괄호 보간법 -->
{{ message | capitalize }}

<!-- v-bind 표현 -->
<div v-bind:id="rawId | formatId"></div>

로컬 선언

new Vue({
    el: '#app',
    data: {},
    filters: {
        capitalize (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    }
}

 

 

---

전역 선언

Vue.filter('capitalize', (value) => {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

전역선언시 여러 필터를 편하게 사용하는 법

• filters.js

import Vue from "vue"

Vue.filter("capitalize", (value) => {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
});

• main.js

import Vue from 'vue'
import App from './App'
import "./filters"

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
})

 

---

필터에 파라미터 넣기

 {{ message | filterA('arg1', arg2) }}

필터 체이닝

{{ message | filterA | filterB }}

 

 

 

 

---

출처 : https://akageun.github.io/2019/07/10/vue-filter.html