Vue에서 radio 다루기

radio 작업도 유사한 방식으로 이루어집니다. 실제로 살펴보겠습니다. 먼저, 우리가 radio 그룹에 바인딩할 속성 choice를 만듭니다:

data() {
	return {
		choice: '',
	}
}

이제 radio 그룹을 만듭니다:

<template>
	<input name="radio" type="radio">
	<input name="radio" type="radio">
	<input name="radio" type="radio">
</template>

각각에 지시어 v-model를 작성하고 속성 choice에 바인딩합니다:

<template>
	<input name="radio" type="radio" v-model="choice">
	<input name="radio" type="radio" v-model="choice">
	<input name="radio" type="radio" v-model="choice">
</template>

또한 각각에 고유한 value를 부여합니다:

<template>
	<input name="radio" type="radio" v-model="choice" value="v1">
	<input name="radio" type="radio" v-model="choice" value="v2">
	<input name="radio" type="radio" v-model="choice" value="v3">
</template>

이제 속성 choice에는 항상 선택된 radio의 value가 들어가게 됩니다:

<template>
	you choosed: {{ choice }}
</template>

radio 그룹을 사용하여 사용자에게 어느 언어가 모국어인지 물어보세요. 선택된 언어가 단락에 출력되도록 만드세요.

이전 문제를 다음과 같이 수정하세요: 서로 다른 언어로 된 텍스트가 담긴 세 개의 단락이 있다고 가정합니다. 사용자의 선택에 따라 선택한 언어로 된 구문을 출력하세요.