Vueでのチェックボックス操作

それでは、 チェックボックスの操作方法を見ていきましょう。次のようなトグルスイッチがあるとします：

<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 ? 'はい' : 'いいえ' }}</p>
</template>

checkboxが与えられています。段落が与えられています。ディレクティブv-ifを使用して次のようにしてください：checkboxがチェックされている場合は段落を表示し、チェックされていない場合は非表示にします。