Vue-да checkbox-пен жұмыс

Енді checkbox-пен жұмыстың қалай жүретінін қарастырайық. Бізде келесі ауыстырғыш бар делік:

<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 белгіленген болса - абзац көрсетілуі керек, ал егер белгіленбеген болса - онда жасырылуы керек.