Vue'da Checkbox ile Çalışma

Şimdi checkbox ile çalışmanın nasıl olduğuna bakalım. Şu anahtara sahip olduğumuzu varsayalım:

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

Bu checkbox'ın çalışmasını kontrol edecek checked özelliğini yapalım:

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

Bu özelliği v-model aracılığıyla bağlayalım:

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

checkbox işaretliyse - checked özelliği true değerine sahip olacak, eğer işaretli değilse - false olacak. Bundan emin olmak için, özelliğin değerini ekranda şu şekilde gösterebilirsiniz:

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

Üçlü operatör kullanılarak daha anlamlı bir şey çıktılanabilir:

<template>
	<input type="checkbox" v-model="checked">
	<p>{{ checked ? 'evet' : 'hayır' }}</p>
</template>

Bir checkbox verildi. Bir paragraf verildi. v-if direktifini kullanarak şunu yapın: eğer checkbox işaretliyse - paragraf gösterilmeli, eğer işaretli değilse - gizlenmelidir.