Monimutkaiset ehdot Vue:ssa
v-if-direktiivissä voidaan tehdä
monimutkaisempiakin ehtoja. Oletetaan esimerkiksi,
että num-ominaisuudessa voi olla
yksi luvuista 1, 2 tai
3:
data() {
return {
num: 3, // olkoon siellä nyt 3
}
}
Tehdään nyt kolme kappaletta, joista
vain yksi näytetään
num-ominaisuuden arvosta riippuen:
<template>
<p v-if="num === 1">yksi</p>
<p v-if="num === 2">kaksi</p>
<p v-if="num === 3">kolme</p>
</template>
Voidaan tehdä myös monimutkaisempia ehtoja:
<template>
<p v-if="num === 1 || num === 3">
yksi tai kaksi
</p>
</template>
Annettu day-ominaisuus, johon on tallennettu
nykyinen viikonpäivä. Oletetaan myös, että sinulla on
seitsemän kappaletta, joista kussakin on kirjoitettu
viikonpäivän nimi. Tee niin, että näytöllä
näkyy vain nykyisen viikonpäivän nimeä
sisältävä kappale.
