Vue'до реактивдүү шарт

Келгиле, шарт реактивдүү болсун. Мисалы, баскычты басуу менен элемент жашырылсын. Анда төмөнкү абзац бар болсун:

<template>
	<p v-if="visible">текст</p>
</template>

Келгиле, биздин абзац башында көрүнүп тургандай кылалы:

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

Эми баскычты жасайлы, аны басуу менен абзац жашырылат:

<template>
	<button @click="hide">жашыр</button>
	<p v-if="visible">текст</p>
</template>

Байланышкан методу visible касиетин false кылып өзгөртөт, ошондо биздин абзац жашырылат:

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

Абзац жана баскыч берилген. Абзац башында жашырылсын. Абзацты көрсөтүүчү баскычты жасаңыз.

Абзац жана эки баскыч берилген. Биринчи баскыч абзацты көрсөтсүн, экинчиси - жашырсын.

Мурунку тапшырманы төмөнкүдөй өзгөртүңүз: экранда ар дайым бир гана баскыч көрүнсүн: эгер абзац көрүнүп турса, анда жашыруу баскычы, эгер жашырылса - көрсөтүү баскычы.