Condiții complexe în Vue
În directiva v-if se pot face
condiții mai complexe. Să presupunem, de exemplu,
că în proprietatea num poate
fi unul dintre numerele 1, 2 sau
3:
data() {
return {
num: 3, // să presupunem că acum este 3
}
}
Acum să facem trei paragrafe, dintre
care să fie afișat doar unul
în funcție de valoarea
proprietății num:
<template>
<p v-if="num === 1">one</p>
<p v-if="num === 2">two</p>
<p v-if="num === 3">three</p>
</template>
Se pot face și condiții mai complexe:
<template>
<p v-if="num === 1 || num === 3">
one or two
</p>
</template>
Este dată proprietatea day, în care este scrisă
ziua curentă a săptămânii. Să presupunem că aveți și
șapte paragrafe, în fiecare fiind scris
numele unei zile a săptămânii. Faceți astfel încât pe ecran
să fie vizibil doar paragraful care conține numele
zilei curente a săptămânii.