Kondisi Kompleks di Vue
Dalam direktif v-if kita dapat membuat
kondisi yang lebih kompleks. Misalnya,
pada properti num dapat berisi
salah satu angka 1, 2, atau
3:
data() {
return {
num: 3, // misalnya saat ini berisi 3
}
}
Sekarang mari kita buat tiga paragraf, di mana
hanya satu yang akan ditampilkan
tergantung pada nilai
properti num:
<template>
<p v-if="num === 1">one</p>
<p v-if="num === 2">two</p>
<p v-if="num === 3">three</p>
</template>
Kita juga dapat membuat kondisi yang lebih kompleks:
<template>
<p v-if="num === 1 || num === 3">
one or two
</p>
</template>
Diberikan properti day, yang berisi
hari dalam seminggu saat ini. Misalkan juga Anda memiliki
tujuh paragraf, di mana masing-masing tertulis
nama hari dalam seminggu. Buatlah agar di layar
hanya terlihat paragraf yang berisi nama
hari dalam seminggu saat ini.