[vue] vue filter를 이용하여 숫자 콤마 넣기

vue filter 란??

추후 공부 후 넣기

 

문제 상황

<li>
	<h4 class="tit">개발 금액</h4>
	<div class="ctn-box">
		{{prdctFix.devPrc}}원
	</div>
</li>

위와 같이 vue 모델에서 데이터를 불러 올 때 금액 값은 3자리 수마다 ,(콤마)를 찍어줘야된다.

vue 선언시 filter를 추가 하고 해당 모델이 바인딩 될 때 filter가 실행되도록 아래와 같이 구성하면 된다.

vue 선언
<script>
var v_cncpt = new Vue({
            el: '#frame-wrap',
            data: {
            },
            filters: {
                currency: function (value) {
                    var num = new Number(value);
                    return num.toFixed(0).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
                }
            },
--------------------------------중략----------------------------------------------

<li>
	<h4 class="tit">개발 금액</h4>
	<div class="ctn-box">
		{{prdctFix.devPrc | currency}}원
	</div>
</li>

위와 같은 결과 값을 얻을 수 있다.