Podmíněné zobrazení ve Vue

Další direktiva, kterou se naučíme, se jmenuje v-if. S její pomocí lze zobrazovat nebo skrývat elementy. Jak tato direktiva funguje: jako parametr přijímá jakoukoli vlastnost objektu data. Pokud tato vlastnost má hodnotu true - pak bude element zobrazen, a pokud false - pak skryt.

Podívejme se na příklad. Předpokládejme, že máme odstavec s atributem v-if. Hodnotou tohoto atributu nechť je vlastnost visible, takto:

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

Nastavme hodnotu naší vlastnosti na true. V tomto případě bude odstavec zobrazen:

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

Pokud však visible nastavíme na hodnotu false, odstavec bude skryt:

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

Předpokládejme, že v data je uložena vlastnost visible. Předpokládejme také, že máte dva odstavce. Udělejte to tak, aby byl první odstavec zobrazen na obrazovce, pokud je vlastnost visible rovna true, a druhý odstavec naopak zobrazen, pokud je vlastnost visible rovna false.