Bedingte Anzeige in Vue

Die nächste Direktive, die wir lernen, heißt v-if. Mit ihr kann man Elemente ein- oder ausblenden. Wie diese Direktive funktioniert: Als Parameter akzeptiert sie jede Eigenschaft des data-Objekts. Wenn diese Eigenschaft den Wert true hat - wird das Element angezeigt, und wenn false - wird es ausgeblendet.

Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben einen Absatz mit dem Attribut v-if. Der Wert dieses Attributs soll die Eigenschaft visible sein, wie folgt:

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

Lassen Sie uns den Wert unserer Eigenschaft auf true setzen. In diesem Fall wird der Absatz angezeigt:

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

Wenn Sie visible jedoch auf den Wert false setzen, wird der Absatz ausgeblendet:

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

Angenommen, in data ist eine Eigenschaft visible gespeichert. Nehmen wir außerdem an, Sie haben zwei Absätze. Sorgen Sie dafür, dass der erste Absatz auf dem Bildschirm angezeigt wird, wenn die Eigenschaft visible true ist, und der zweite Absatz hingegen angezeigt wird, wenn die Eigenschaft visible false ist.