Vue에서의 계산된 속성
다른 속성을 기반으로 반응적으로 계산되는 속성을 정의할 수 있습니다. 이러한 속성을 계산된 속성이라고 합니다.
이들은 computed 설정 옵션 내에 위치합니다.
예제를 통해 살펴보겠습니다. 속성에 사용자의 이름과 성이 저장되어 있다고 가정해 봅시다:
data() {
return {
name: 'john',
surn: 'smit',
}
}
성과 이름이 포함된 전체 이름을 담는 full 속성을 만들어 보겠습니다:
computed: {
full: function() {
return this.name + ' ' + this.surn;
}
}
템플릿에서 속성들의 내용을 출력해 보겠습니다:
<template>
<p>{{ name }}</p>
<p>{{ surn }}</p>
<p>{{ full }}</p>
</template>
계산된 속성은 반응적으로 변경됩니다. 이는 이름이나 성을 변경하면 full 속성도 자동적으로 반응하여 즉시 변경되며, 화면에서 변화를 바로 볼 수 있다는 의미입니다.
cost 속성에 제품의 가격이 저장되어 있고, amount 속성에 그 제품의 수량이 저장되어 있다고 가정합니다. 제품의 총 가격(가격 * 수량)을 포함하는 계산된 속성 price를 만드세요.
cost 속성을 변경하는 버튼을 만드세요. 이때 계산된 속성도 함께 변경되는지 확인하세요.
