Arbeit mit Checkboxen in Vue

Schauen wir uns nun an, wie die Arbeit mit Checkboxen erfolgt. Nehmen wir an, wir haben den folgenden Schalter:

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

Erstellen wir eine Eigenschaft checked, die die Funktion dieser Checkbox steuert:

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

Binden wir diese Eigenschaft über v-model:

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

Wenn die Checkbox markiert ist - hat die Eigenschaft checked den Wert true, und wenn sie nicht markiert ist - dann false. Um sich davon zu überzeugen, kann man den Wert der Eigenschaft auf den Bildschirm ausgeben, so:

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

Mit dem ternären Operator kann man etwas Sinnvolleres ausgeben:

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

Gegeben ist eine Checkbox. Gegeben ist ein Absatz. Verwenden Sie die Direktive v-if, um Folgendes zu erreichen: Wenn die Checkbox markiert ist - soll der Absatz angezeigt werden, und wenn sie nicht markiert ist - dann soll er ausgeblendet werden.