Lucrul cu checkbox în Vue

Să analizăm acum cum se realizează lucrul cu checkbox. Să presupunem că avem următorul comutator:

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

Să creăm proprietatea checked, care va gestiona funcționarea acestui checkbox:

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

Să legăm această proprietate prin v-model:

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

Dacă checkbox este bifat - proprietatea checked va avea valoarea true, iar dacă nu este bifat - atunci false. Pentru a ne convinge de acest lucru, putem afișa valoarea proprietății pe ecran, astfel:

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

Cu ajutorul operatorului ternar se poate afișa ceva mai semnificativ:

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

Este dat un checkbox. Este dat un paragraf. Cu ajutorul directivei v-if faceți următoarele: dacă checkbox este bifat - paragraful trebuie să fie afișat, iar dacă nu este bifat - atunci să fie ascuns.