Պայմանով ցուցադրումը Vue-ում

Հաջորդ դիրեկտիվը, որը մենք կուսումնասիրենք, կոչվում է v-if։ Դրա միջոցով կարելի է ցուցադրել կամ թաքցնել տարրերը։ Ինչպես է աշխատում այս դիրեկտիվը. այն որպես պարամետր ընդունում է data օբյեկտի ցանկացած հատկություն։ Եթե այդ հատկությունն ունի true արժեք, ապա տարրը կցուցադրվի, իսկ եթե false, ապա կթաքնվի։

Դիտարկենք օրինակով։ Ենթադրենք՝ ունենք պարագրաֆ v-if ատրիբուտով։ Թող այդ ատրիբուտի արժեքը լինի visible հատկությունը, ահա այսպես.

<template>
	<p v-if="visible">տեքստ</p>
</template>

Եկեք մեր հատկության արժեքը դնենք true։ Այս դեպքում պարագրաֆը կցուցադրվի.

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

Իսկ ահա եթե visible-ին տրվի false արժեք, ապա պարագրաֆը կթաքնվի.

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

Ենթադրենք՝ data-ում պահվում է visible հատկությունը։ Ենթադրենք՝ ունեք նաև երկու պարագրաֆ։ Դարձրեք, որ առաջին պարագրաֆը ցուցադրվի էկրանին, եթե visible հատկությունը հավասար է true-ի, իսկ երկրորդ պարագրաֆը, ընդհակառակը, ցուցադրվի, եթե հատկությունը visible հավասար է false-ի։