Arbete med checkbox i Vue

Låt oss nu titta på hur arbetet med checkbox går till. Låt oss säga att vi har följande växlingsknapp:

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

Låt oss skapa en egenskap checked, som kommer att styra funktionen för denna checkbox:

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

Låt oss binda denna egenskap via v-model:

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

Om checkbox är markerad - kommer egenskapen checked att ha värdet true, och om den är omarkerad - då false. För att förvissa sig om detta kan du skriva ut värdet av egenskapen på skärmen, så här:

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

Med hjälp av den ternära operatorn kan man skriva ut något mer meningsfullt:

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

En checkbox är given. En styckesats är given. Använd direktivet v-if för att göra följande: om checkbox är markerad - ska styckesatsen visas, och om den är omarkerad - ska den döljas.