Reaktīvs nosacījums Vue

Padarīsim tā, lai nosacījums būtu reaktīvs. Piemēram, padarīsim tā, lai elements paslēpjas, noklikšķinot uz pogas. Pieņemsim, ka mums ir šāds rindkopa:

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

Padarīsim tā, lai mūsu rindkopa sākotnēji būtu redzama:

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

Tagad izveidosim pogu, noklikšķinot uz kuras rindkopa paslēpsies:

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

Piesaistītā metode mainīs īpašību visible uz false, tādējādi liekot mūsu rindkopai paslēpties:

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

Dota rindkopa un poga. Lai rindkopa sākotnēji ir paslēpta. Izveidojiet pogu, kas parādīs rindkopu.

Dota rindkopa un divas pogas. Lai pirmā poga rāda rindkopu, bet otrā - to paslēpj.

Modificējiet iepriekšējo uzdevumu tā, lai ekrānā vienmēr būtu redzama tikai viena no pogām: ja rindkopa ir parādīta, tad poga paslēpšanai, bet ja paslēpta - tad poga parādīšanai.