Vueでのラジオボタンの操作

ラジオボタン の操作も同様の方法で行います。実際に見てみましょう。まず、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グループを使用してユーザーに母国語を尋ね、選択された言語が段落に表示されるようにしてください。

前のタスクを次のように変更してください：異なる言語で書かれたテキストを持つ3つの段落があるとします。ユーザーの選択に応じて、選ばれた言語でフレーズを表示してください。