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;
	}
}

Абзац және түйме берілген. Абзацтың бастапқыда жасырын болсын. Абзацты көрсететін түймені жасаңыз.

Абзац және екі түйме берілген. Бірінші түйменің абзацты көрсетуін, ал екіншісінің - оны жасыруын жасаңыз.

Алдыңғы тапсырманы әрқашан экранда түймелердің бірі ғана көрінетін етіп өзгертіңіз: егер абзац көрсетілсе, онда жасыру түймесі, ал егер жасырын болса - онда көрсету түймесі.