Vue-da Reaktiv Shart

Keling, shartni reaktiv qilaylik. Misol uchun, element tugma bosilganda yashirinsin. Quyidagi abzats bor deb faraz qilaylik:

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

Keling, abzatsimiz dastlab ko‘rinadigan holatda bo‘lsin:

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

Endi abzatsni yashirish uchun bosiladigan tugma yaratamiz:

<template>
	<button @click="hide">yashirish</button>
	<p v-if="visible">matn</p>
</template>

Bog‘langan metod visible xususiyatini false qiymatiga o‘zgartiradi, shu bilan abzatsimizni yashirishga majbur qiladi:

methods: {
	hide: function() {
		this.visible = false;
	}
}

Abzats va tugma berilgan. Faraz qilaylik, abzats dastlab yashiringan. Abzatsni ko‘rsatadigan tugmani yarating.

Abzats va ikkita tugma berilgan. Faraz qilaylik, birinchi tugma abzatsni ko‘rsatsin, ikkinchisi esa uni yashirsin.

Oldingi vazifani shunday o‘zgartiringki, ekranda har doim faqat bitta tugma ko‘rinsin: agar abzats ko‘rsatilgan bo‘lsa, yashirish tugmasi, agar yashiringan bo‘lsa, ko‘rsatish tugmasi.