Vue-da shartli ravishda ko'rsatish

Biz o'rganadigan keyingi direktiva v-if deb ataladi. Uning yordamida elementlarni ko'rsatish yoki yashirish mumkin. Ushbu direktiva qanday ishlaydi: u parametr sifatida data ob'ektining istalgan xususiyatini qabul qiladi. Agar bu xususiyat true qiymatiga ega bo'lsa - element ko'rsatiladi, agar false bo'lsa - yashiriladi.

Keling, buni misol bilan ko'rib chiqaylik. Aytaylik, v-if atributi bilan abzas bor. Ushbu atributning qiymati visible xususiyati bo'lsin, mana shunday:

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

Keling, xususiyatimizning qiymatini true ga o'rnatamiz. Bu holda abzas ko'rsatiladi:

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

Agar visible qiymati false ga o'rnatilsa, abzas yashiriladi:

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

Aytaylik, data da visible xususiyati saqlanadi. Sizda ikkita abzas bor deb faraz qilaylik. Birinchi abzas ekranda visible xususiyati true ga teng bo'lganda ko'rinsin, ikkinchi abzas esa, aksincha, visible xususiyati false ga teng bo'lganda ko'rinsin.