Reaktyvi sąlyga Vue

Padarykime, kad sąlyga būtų reaktyvi. Pavyzdžiui, padarykime kad elementas pasislėptų paspaudus mygtuką. Tarkime, kad turime tokį paragrafą:

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

Padarykime, kad mūsų paragrafas iš pradžių būtų rodomas:

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

Dabar sukurkime mygtuką, kurį paspaudus paragrafas pasislėps:

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

Susietas metodas pakeis savybę visible į false, taip privers mūsų paragrafą pasislėpti:

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

Duotas paragrafas ir mygtukas. Tegul paragrafas iš pradžių yra paslėptas. Sukurkite mygtuką, kuris paragrafą rodys.

Duotas paragrafas ir du mygtukai. Tegul pirmas mygtukas paragrafą rodo, o antras - jį paslėpia.

Modifikuokite ankstesnį uždavinį taip, kad ekrane visada būtų matomas tik vienas mygtukas: jei paragrafas rodomas, tai mygtukas jam paslėpti, o jei paslėptas - tai mygtukas jam rodyti.