[Vue.js] 뷰(Vue) 계산형 속성(Computed Property)

 

Vue.js

 

뷰(Vue) 계산형 속성(Computed Property)

 

 

See the Pen 뷰(Vue) 계산형 속성 by junheeleeme (@junheeleeme) on CodePen.

 

 

 

var app = new Vue({
    el : "#simple",
    data : {
        num : 0,
        result : 0
        },
    computed : {
        sum : function(){
            var nsum = 0;
            for(var i = Number(this.num)  ; i > 0  ; i--){
                nsum+= i;
            }
            return nsum;
        }
    }

 

computed 라고 해서 무언가 특별할 줄 알았는데 methods와 거의 같다. 속성처럼 입력하자마자 계산되어 출력이 되어버린다.

 

return값을 무조건 필요로하며 메소드가 아니므로 methods와 착각하여 '()'를 붙이면 안된다.

 

그냥 {{sum}} 또는 태그 안에 v-text="sum"으로 출력해준다.

 

계산할때는 HTML 요소 내부에서는 모두 문자열로 다루어지기 때문에 입력은 값은 숫자형으로 변환이 필요하다.

 

Number() 또는 ParseInt() 함수를 활용!