Εργασία με checkbox στο Vue

Ας δούμε τώρα πώς γίνεται η εργασία με checkbox. Ας υποθέσουμε ότι έχουμε την ακόλουθη επιλογή:

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

Ας δημιουργήσουμε την ιδιότητα checked, που θα ελέγχει τη λειτουργία αυτού του checkbox:

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 είναι επιλεγμένο - η παράγραφος πρέπει να εμφανίζεται, ενώ εάν δεν είναι επιλεγμένο - τότε να κρύβεται.