Komplekse betingelser i Vue
I direktivet v-if kan man lave
mere komplekse betingelser. Lad os for eksempel sige,
at egenskaben num kan
være et af tallene 1, 2 eller
3:
data() {
return {
num: 3, // lad os sige at den er 3 lige nu
}
}
Lad os nu lave tre afsnit, hvoraf
kun ét vil blive vist
afhængigt af værdien af
egenskaben 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 kan også lave mere komplekse betingelser:
<template>
<p v-if="num === 1 || num === 3">
one or two
</p>
</template>
Givet egenskaben day, hvor den aktuelle ugedag er gemt.
Lad os også sige, at du har syv afsnit, i hver af dem er der skrevet
en ugedags navn. Gør sådan, at kun det afsnit, der indeholder navnet
på den aktuelle ugedag, er synligt på skærmen.