Vue - filters 기능 이용한 콤마 찍기

예전에는 filters 라는 메소드가 없어서 ? 못찾아서 ? 못사용했는데, 최근에 뷰에 대해 공부하다 보니 있었다.

filters 기능을 몰랐던 당시에는 methods, watch 에 넣어서 사용했었는데 구분 할 수 있을것 같다

<div v-for="arr in commaTest">
  {{arr | comma}}
</div>

 

1. 로컬 필터

data(){
	return{
    	commaTest: [14000,1231244,1231244566,42134324,21312],
    }
},

filters:{
  comma(val){
  	return String(val).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
}

 

2. 전역 필터

<div v-for="arr in commaTest">
	{{arr | makeComma}}	
</div>

Vue.config.productionTip = false;
Vue.config.silent = true;

Vue.filter("makeComma", val =>{
    return String(val).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
})

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