Complexe voorwaarden in Vue
In de directive v-if kun je
complexere voorwaarden maken. Stel dat
in de property num bijvoorbeeld
een van de getallen 1, 2 of
3 kan zijn:
data() {
return {
num: 3, // stel dat er nu 3 staat
}
}
Laten we nu drie alinea's maken,
waarvan er slechts één wordt getoond
afhankelijk van de waarde van de
property num:
<template>
<p v-if="num === 1">one</p>
<p v-if="num === 2">two</p>
<p v-if="num === 3">three</p>
</template>
Je kunt ook complexere voorwaarden maken:
<template>
<p v-if="num === 1 || num === 3">
one or two
</p>
</template>
Gegeven is de property day, waarin de
huidige dag van de week is opgeslagen. Stel dat je ook
zeven alinea's hebt, in elk staat de
naam van een dag van de week. Zorg ervoor dat op het scherm
alleen de alinea zichtbaar is die de naam bevat
van de huidige dag van de week.
