Vertoning volgens Voorwaarde in Vue

Die volgende richtlijn wat ons sal bestudeer, word genoem v-if. Met dit kan jy elemente wys of verberg. Hoe hierdie richtlijn werk: dit neem as parameter enige eienskap van die data voorwerp. As hierdie eienskap die waarde true het - sal die element gewys word, en as dit false is - sal dit verberg word.

Kom ons kyk na 'n voorbeeld. Gestel ons het 'n paragraaf met die attribuut v-if. Laat die waarde van hierdie attribuut die eienskap visible wees, soos volg:

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

Kom ons stel die waarde van ons eienskap na true. In hierdie geval sal die paragraaf gewys word:

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

Maar as ons visible op die waarde false stel, sal die paragraaf verberg word:

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

Gestel in data word die eienskap visible gestoor. Gestel jy het ook twee paragrawe. Maak dit sodat die eerste paragraaf op die skerm gewys word, as die eienskap visible gelyk is aan true, en die tweede paragraaf, andersom, gewys word as die eienskap visible gelyk is aan false.