Vue හි checkbox සමග වැඩකිරීම

දැන් අපි බලමු, 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 සලකුණු කර තිබේ නම් - ඡේදය ප්‍රදර්ශනය කළ යුතුය, සලකුණු කර නැති නම් - සැඟවිය යුතුය.