Podmienené zobrazenie vo Vue

Ďalšia direktíva, ktorú sa naučíme, sa volá v-if. S jej pomocou môžeme zobrazovať alebo skrývať prvky. Ako táto direktíva funguje: ako parameter prijíma ľubovoľnú vlastnosť objektu data. Ak má táto vlastnosť hodnotu true - potom bude prvok zobrazený, a ak false - potom bude skrytý.

Pozrime sa na príklad. Nech máme odsek s atribútom v-if. Hodnotou tohto atribútu nech je vlastnosť visible, takto:

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

Nastavme hodnotu našej vlastnosti na true. V tomto prípade bude odsek zobrazený:

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

A ak nastavíme visible na hodnotu false, potom bude odsek skrytý:

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

Nech v data je uložená vlastnosť visible. Nech máte tiež dva odseky. Urobte tak, aby bol prvý odsek zobrazený na obrazovke, ak je vlastnosť visible rovná true, a druhý odsek, naopak, zobrazený, ak je vlastnosť visible rovná false.