Conditions complexes dans Vue
Dans la directive v-if, il est possible de créer
des conditions plus complexes. Supposons, par exemple,
que la propriété num puisse contenir
l'un des nombres 1, 2 ou
3 :
data() {
return {
num: 3, // supposons qu'il contienne 3 pour le moment
}
}
Maintenant, créons trois paragraphes, dont
un seul sera affiché
en fonction de la valeur
de la propriété num :
<template>
<p v-if="num === 1">un</p>
<p v-if="num === 2">deux</p>
<p v-if="num === 3">trois</p>
</template>
Il est également possible de créer des conditions plus complexes :
<template>
<p v-if="num === 1 || num === 3">
un ou trois
</p>
</template>
Soit une propriété day, dans laquelle est enregistré
le jour de la semaine actuel. Supposons également que vous ayez
sept paragraphes, dans chacun desquels est écrit
le nom d'un jour de la semaine. Faites en sorte qu'à l'écran,
seul le paragraphe contenant le nom
du jour de la semaine actuel soit visible.
