Vue.js kurz & gut

KAPITEL 6

Bedingtes Rendering mit v-if

Bisher wurden Datenattribute immer direkt in das Template eingefügt. Doch was tun, wenn die Ausgabe der Daten an Bedingungen geknüpft ist? Für diesen Fall bietet Vue die Direktiven v-if und v-show an. Mit der Direktive v-if kann das Rendering eines HTML-Blocks an eine oder mehrere Bedingungen geknüpft werden:

<div v-if="shouldDisplay">Hello!</div>

Mit der Direktive v-else lässt sich des Weiteren ein else-Block anfügen:

<div v-if="shouldDisplay">Hello!</div>

<div v-else>Goodbye!</div>

Mit der Direktive v-else-if sind auch else-if-Blöcke möglich:

<div v-if="type === 'A'">A</div>

<div v-else-if="type === 'B'">B</div>

<div v-else-if="type === 'C'">C</div>

Ein Element mit der Direktive v-else-if muss unmittelbar ...