АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP, Python и фреймворки. Сегодня последний день для записи! Жми!
⊗jsvuPmCdCm 23 of 72 menu
Бесплатные курсы по Git. Начинаем, когда соберется 1000 желающих:) Жми для записи!

Сложные условия в 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, в котором записан текущий день недели. Пусть также у вас есть семь абзацев, в каждом из которых написано название дня недели. Сделайте так, чтобы на экране был виден только абзац, содержащий название текущего дня недели.

enru