Vue හි කොන්දේසි සහිතව පෙන්වීම

අපි ඉගෙන ගන්න ඊළඟ නිර්දේශය හැඳින්වෙන්නේ v-if ලෙසය. එය භාවිතා කර ඔබට මූලද්‍රව්‍ය පෙන්වන්න හෝ සඟවන්න පුළුවන්. මෙම නිර්දේශය ක්‍රියා කරන්නේ කෙසේද යත්: එය පරාමිතියක් ලෙස data වස්තුවේ ඕනෑම දේපලක් ලබා ගනී. මෙම දේපලේ අගය true නම් - මූලද්‍රව්‍යය පෙන්වනු ලැබේ, එසේ නොමැතිනම් false නම් - සඟවනු ලැබේ.

අපි උදාහරණයක් බලමු. අපට v-if ගුණාංගය සහිත ඡේදයක් ඇති යුතුය. මෙම ගුණාංගයේ අගය ලෙස visible දේපල පවතින්න, මෙහෙමයි:

<template>
	<p v-if="visible">text</p>
</template>

අපි අපේ දේපලේ අගය true ලෙස සකසමු. මෙම අවස්ථාවේදී ඡේදය පෙන්වනු ලැබේ:

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

නමුත් visible හි අගය false ලෙස සකස් කළහොත්, ඡේදය සඟවනු ඇත:

data() {
	return {
		visible: false,
	}
}

data හි visible දේපලක් ගබඩා කර ඇතැයි සිතමු. ඔබට ඡේද දෙකක් ද ඇතැයි සිතමු. කරන්න පළමු ඡේදය තිරයේ පෙන්වීමට, visible දේපලේ අගය true නම්, දෙවන ඡේදය, අනෙක් අතට, පෙන්වන්න, දේපලේ අගය visible false නම්.