Vue에서 checkbox 작업하기

이제 checkbox를 다루는 방법을 살펴보겠습니다. 다음과 같은 토글 스위치가 있다고 가정해 봅시다:

<template>
	<input type="checkbox">
</template>

이 checkbox의 작동을 제어할 checked 속성을 만들어 보겠습니다:

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

v-model을 통해 이 속성을 바인딩합시다:

<template>
	<input type="checkbox" v-model="checked">
</template>

checkbox가 체크되면 checked 속성 값은 true가 되고, 체크되지 않으면 false가 됩니다. 이를 확인하기 위해 속성 값을 화면에 출력해 볼 수 있습니다. 다음과 같이요:

<template>
	<input type="checkbox" v-model="checked">
	<p>{{ checked }}</p>
</template>

삼항 연산자를 사용하여 더 의미 있는 내용을 출력할 수도 있습니다:

<template>
	<input type="checkbox" v-model="checked">
	<p>{{ checked ? 'yes' : 'no' }}</p>
</template>

checkbox가 주어져 있습니다. 단락이 주어져 있습니다. v-if 디렉티브를 사용하여 다음을 구현하세요: checkbox가 체크되면 단락이 표시되어야 하고, 체크되지 않으면 숨겨져야 합니다.