Condiție Reactivă în Vue

Haideți să facem condiția reactivă. De exemplu, să facem astfel încât elementul să se ascundă la click pe un buton. Să presupunem că avem următorul paragraf:

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

Să facem astfel încât paragraful nostru să fie afișat inițial:

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

Să creăm acum un buton, la apăsarea căruia paragraful va fi ascuns:

<template>
	<button @click="hide">ascunde</button>
	<p v-if="visible">text</p>
</template>

Metoda asociată va schimba proprietatea visible în false, făcând astfel paragraful nostru să dispară:

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

Este dat un paragraf și un buton. Să presupunem că paragraful este ascuns inițial. Creați un buton care va afișa paragraful.

Sunt date un paragraf și două butoane. Să presupunem că primul buton afișează paragraful, iar al doilea - îl ascunde.

Modificați problema anterioară astfel încât pe ecran să fie vizibil întotdeauna un singur buton: dacă paragraful este afișat, atunci butonul pentru ascundere, iar dacă este ascuns - atunci butonul pentru afișare.