Visualizzazione Condizionale in Vue

La prossima direttiva che studieremo si chiama v-if. Con essa è possibile mostrare o nascondere gli elementi. Come funziona questa direttiva: come parametro accetta qualsiasi proprietà dell'oggetto data. Se questa proprietà ha il valore true - l'elemento sarà mostrato, mentre se è false - sarà nascosto.

Vediamo un esempio. Supponiamo di avere un paragrafo con l'attributo v-if. Il valore di questo attributo sia la proprietà visible, in questo modo:

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

Impostiamo il valore della nostra proprietà a true. In questo caso il paragrafo sarà mostrato:

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

Mentre se visible viene impostato al valore false, il paragrafo sarà nascosto:

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

Supponiamo che in data sia memorizzata la proprietà visible. Supponiamo inoltre che tu abbia due paragrafi. Fai in modo che il primo paragrafo venga mostrato sullo schermo se la proprietà visible è uguale a true, e il secondo paragrafo, al contrario, venga mostrato se la proprietà visible è uguale a false.