Vue에서 조건부 표시

다음으로 배울 지시어는 v-if입니다. 이를 사용하면 요소를 표시하거나 숨길 수 있습니다. 이 지시어의 작동 방식은 다음과 같습니다: 매개변수로 data 객체의 임의의 속성을 받습니다. 이 속성 값이 true이면 요소가 표시되고, false이면 숨겨집니다.

예제를 통해 살펴보겠습니다. v-if 속성이 있는 단락이 있다고 가정합니다. 이 속성의 값으로 visible 속성을 사용합니다. 다음과 같이 작성합니다:

<template>
	<p v-if="visible">text</p>
</template>

속성 값을 true로 설정해 봅시다. 이 경우 단락이 표시됩니다:

data() {
	return {
		visible: true,
	}
}

반면에 visible 값을 false로 설정하면 단락이 숨겨집니다:

data() {
	return {
		visible: false,
	}
}

data에 visible 속성이 저장되어 있다고 가정합니다. 두 개의 단락도 있다고 가정합니다. visible 속성이 true일 때 첫 번째 단락이 화면에 표시되고, 두 번째 단락은 반대로 visible 속성이 false일 때 표시되도록 만드세요.