Сложные условия в Vue
В директиве v-if можно делать
более сложные условия. Пусть, к примеру,
в свойстве num может
быть одно из чисел 1, 2 или
3:
data() {
return {
num: 3, // пусть сейчас там 3
}
}
Давайте теперь сделаем три абзаца, из
которых будет показан только один
в зависимости от значения
свойства num:
<template>
<p v-if="num === 1">one</p>
<p v-if="num === 2">two</p>
<p v-if="num === 3">three</p>
</template>
Можно делать и более сложные условия:
<template>
<p v-if="num === 1 || num === 3">
one or two
</p>
</template>
Дано свойство day, в котором записан
текущий день недели. Пусть также у вас есть
семь абзацев, в каждом из которых написано
название дня недели. Сделайте так, чтобы на экране
был виден только абзац, содержащий название
текущего дня недели.