Condiciones complejas en Vue
En la directiva v-if se pueden hacer
condiciones más complejas. Supongamos, por ejemplo,
que en la propiedad num puede
haber uno de los números 1, 2 o
3:
data() {
return {
num: 3, // supongamos que hay un 3 ahora
}
}
Ahora hagamos tres párrafos, de los
cuales solo se mostrará uno
dependiendo del valor de la
propiedad num:
<template>
<p v-if="num === 1">uno</p>
<p v-if="num === 2">dos</p>
<p v-if="num === 3">tres</p>
</template>
También se pueden hacer condiciones más complejas:
<template>
<p v-if="num === 1 || num === 3">
uno o tres
</p>
</template>
Se da la propiedad day, en la que está registrado
el día actual de la semana. Supongamos también que tienes
siete párrafos, en cada uno de los cuales está escrito
el nombre de un día de la semana. Haz que en la pantalla
solo sea visible el párrafo que contiene el nombre
del día actual de la semana.