Betinget visning i Vue

Det neste direktivet vi skal studere heter v-if. Med det kan du vise eller skjule elementer. Hvordan dette direktivet fungerer: det tar en hvilken som helst egenskap fra data-objektet som parameter. Hvis denne egenskapen har verdien true - vil elementet bli vist, og hvis false - vil det bli skjult.

La oss se på et eksempel. Anta at vi har et avsnitt med attributtet v-if. La egenskapen visible være verdien til dette attributtet, slik:

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

La oss sette verdien av vår egenskap til true. I dette tilfellet vil avsnittet bli vist:

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

Men hvis visible settes til verdien false, vil avsnittet bli skjult:

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

Anta at egenskapen visible er lagret i data. Anta at du også har to avsnitt. Gjør så det første avsnittet vises på skjermen hvis egenskapen visible er true, og det andre avsnittet, tvert imot, vises hvis egenskapen visible er false.