Komplexe Bedingungen in Vue
In der Direktive v-if können
komplexere Bedingungen erstellt werden. Nehmen wir an,
in der Eigenschaft num könnte
eine der Zahlen 1, 2 oder
3 stehen:
data() {
return {
num: 3, // Nehmen wir an, dort steht aktuell 3
}
}
Erstellen wir nun drei Absätze, von denen
nur einer angezeigt wird, abhängig vom Wert
der Eigenschaft num:
<template>
<p v-if="num === 1">one</p>
<p v-if="num === 2">two</p>
<p v-if="num === 3">three</p>
</template>
Man kann auch komplexere Bedingungen erstellen:
<template>
<p v-if="num === 1 || num === 3">
one or two
</p>
</template>
Gegeben ist die Eigenschaft day, in der der
aktuelle Wochentag gespeichert ist. Nehmen wir außerdem an, Sie haben
sieben Absätze, in denen jeweils der Name eines Wochentags
steht. Sorgen Sie dafür, dass auf dem Bildschirm
nur der Absatz sichtbar ist, der den Namen
des aktuellen Wochentags enthält.
