<template>
<button type="button" @click="count++">count is {{ count }} </button>
</template>
이는 count 의 변경 사항이 발생했을 때 추적하여 화면에 반영해준다. 이 때 렌더링되는 수식이 조금 복잡해지면 {{ }} 수식 내에 넣기 부담스러울 수 있다.
<template>
<button type="button" @click="count++">count is {{ (count + "개가 반영 : " )+ (count>=5 ? "0개 이상" : "0개 이하")}} </button>
</template>
const getCountMessage = () => {
let message = count + "개가 반영, ";
message += count>=5 ? "0개 이상" : "0개 이하";
return message;
};
위와 같이 getCountMessage 라는 호출 가능한 함수를 사용해서 get 가능한 형태로 만들어준다.
<template>
<button type="button" @click="count++">count is {{ getCountMessage() }} </button>
</template>
그리고 template 내에서 필요한 부분에 getCountMessage()를 호출하는 식으로 컴포넌트를 렌더링할 수 있다. {{ getCountMessage() }}
const getComputed = computed(()=>{
let message = count.value + "개가 반영";
return message;
});
<template>
<button type="button" @click="count++">count is {{ getComputed }} </button>
</template>