Работа с условиями в фреймворке Vue

Следующая директива, которую мы изучим, называется v-if. С ее помощью можно показывать или скрывать элементы. Как эта директива работает: параметром она принимает любое свойство объекта data. Если это свойство имеет значение true - то элемент будет показан, а если false - то скрыт.

Давайте посмотрим на примере.

Пусть у нас есть абзац с атрибутом v-if. Значением этого атрибута пусть служит свойство show, вот так:

<div id="app"> <p v-if="show">hello</p> </div>

Получается, что этот абзац будет показан, если show имеет значение true, и скрыт, если false.

Давайте установим значение нашего свойства в true:

let app = new Vue({ el: '#app', data: { show: true, }, });

А теперь соберем все вместе и запустим - абзац будет показан:

let app = new Vue({ el: '#app', data: { show: true, }, }); <div id="app"> <p v-if="show">hello</p> </div>

А вот если show поставить в значение false, то абзац будет скрыт:

let app = new Vue({ el: '#app', data: { show: false, }, }); <div id="app"> <p v-if="show">hello</p> </div>

Можно инвертировать условие с помощью восклицательного знака:

<div id="app"> <p v-if="!show">hello</p> </div>

В таком случае абзац будет показан, если show имеет значение false и скрыт - если true.

Пусть в data хранится свойство show. Пусть у вас также есть два абзаца. Сделайте так, чтобы первый абзац был показан на экране, если свойство show равно true, а второй абзац, наоборот, показан, если свойство show равно false.

Прячем по нажатию

Давайте сделаем так, чтобы элемент спрятался по нажатию на кнопку.

Пусть к директиве v-if привязано свойство show:

<div id="app"> <p v-if="show">hello</p> </div>

Пусть изначально в свойстве show будет true (то есть наш абзац будет показан, а не скрыт):

data: { show: true, }

Добавим еще кнопку, ко клику на которую будет вызываться метод hideElem:

<div id="app"> <button v-on:click="hideElem">Спрятать</button> <p v-if="show">hello</p> </div>

Этот метод будет менять свойство show на false, тем самым заставляя наш абзац скрыться:

methods: { hideElem: function() { this.show = false; } }

Давайте соберем все вместе и запустим:

let app = new Vue({ el: '#app', data: { show: true, }, methods: { hideElem: function() { this.show = false; } } }); <div id="app"> <button v-on:click="hideElem">Спрятать</button> <p v-if="show">hello</p> </div>

Если вы запустите этот код и нажмете на кнопку - абзац скроется. Аналогичным образом можно реализовать и показ абзаца обратно.

Пусть в data хранится следующее:

data: { showName: true, name: 'Вася' }

Выведите в абзаце значение свойства name. Покажите абзац, если свойство showName равно true, и скройте, если оно равно false.

Модифицируйте предыдущую задачу так, чтобы появилась кнопка, по нажатию на которую абзац будет скрываться.

Модифицируйте предыдущую задачу так, чтобы появилась еще одна кнопка, по нажатию на которую абзац будет показываться обратно.

Модифицируйте предыдущую задачу так, чтобы на экране всегда была видна только одна из кнопок: если абзац показан, то кнопка для сокрытия, а если скрыт - то кнопка для показа.

Показ и скрытие

Давайте теперь по первому клику на кнопку будем показывать абзац, а по второму клику на эту же кнопку - прятать. Для этого метод hideElem переименуем на toggleElem в соответствии с его новыми обязанностями:

<div id="app"> <button v-on:click="toggleElem">Нажми</button> <p v-if="show">hello</p> </div>

А в самом методе в this.show запишем то, что сейчас хранится в this.show, но с противоположным значением, вот так - !this.show.

Как это будет работать: если в this.show сейчас true, то команда !this.show превратит его в false и наоборот.

Реализуем:

toggleElem: function() { this.show = !this.show; }

Соберем все вместе и запустим:

let app = new Vue({ el: '#app', data: { show: true, }, methods: { toggleElem: function() { this.show = !this.show; } } }); <div id="app"> <button v-on:click="toggleElem">Нажми</button> <p v-if="show">hello</p> </div>

Теперь по нажатию на кнопку элемент будет то скрываться, то показываться. Проверьте.

Дан абзац и кнопка. Сделайте так, чтобы по первому нажатию на кнопку абзац скрывался, а по второму - показывался обратно.

Дан массив. Выведите элементы этого массива в виде списка ul. Пусть также дана кнопка. Сделайте так, чтобы наша кнопка скрывала и показывала наш список. Пусть при этом список будет изначально скрыт.

Даны два абзаца и кнопка. Пусть один абзац скрыт, а второй показан. Сделайте так, чтобы по нажатию на кнопку показанный абзац скрывался, а скрытый - показывался.

Добавим тернарный оператор

Не очень удобно то, что в кнопочке сейчас всегда написан текст 'Нажми'. Давайте сделаем так, чтобы там чередовались слова 'Скрыть' и 'Показать' в зависимости от следующего действия.

Для этого нам необходимо использовать тернарный оператор следующим образом:

<button v-on:click="toggleElem"> {{ show ? 'Скрыть' : 'Показать' }} </button>

Это работает так: если свойство show имеет значение true, то следующее действие будет сокрытие элемента и мы покажем текст 'Скрыть', а если оно имеет значение false, то следующее действие будет показ элемента и мы покажем текст 'Показать'.

Давайте применим описанные изменения к нашему коду:

let app = new Vue({ el: '#app', data: { show: true, }, methods: { toggleElem: function() { this.show = !this.show; } } }); <div id="app"> <button v-on:click="toggleElem"> {{ show ? 'Скрыть' : 'Показать' }} </button> <p v-if="show">hello</p> </div>

Дан абзац и кнопка.Сделайте так, чтобы кнопка скрывала и показывала наш абзац и при этом меняла свой текст в соответствии со своим действием.

Модифицируйте предыдущую задачу так, чтобы у нас стало 3 абзаца и 3 кнопки, каждая из которых будет предназначена для работы с одним из абзацев.

Директива v-else

Директива v-if может также работать в комплекте с v-else. Давайте посмотрим, как это выглядит на практике.

Пусть свойство show может принимать или true или false:

let app = new Vue({ el: '#app', data: { show: true, // тут или true, или false }, });

Сделаем так, чтобы, если show равно true, то выводилось 'да', в противном случае - 'нет':

<div id="app"> <p v-if="show">да</p> <p v-else>нет</p> </div>

Учтите, что v-else обязательно должен идти в комплекте с v-if и элемент с v-else обязательно должен идти сразу после элемента с v-if.

Пусть в data хранится следующее:

data: { hello: true, name: 'Вася' }

С помощью свойства name выведите на экран 'Привет, Вася', если свойство hello равно true и 'Пока, Вася', если оно равно false. Для решения задачи сделайте два абзаца.

Сложные условия

В директиве v-if можно делать не только свойства со значениями true или false, но и передавать более сложные условия.

Пусть, к примеру, в свойстве num может быть одно из чисел 1, 2 или 3:

let app = new Vue({ el: '#app', data: { num: 3, // пусть сейчас там 3 }, });

Давайте теперь сделаем 3 абзаца, из которых будет показан только один в зависимости от значения свойства num:

<div id="app"> <p v-if="num == 1">один</p> <p v-if="num == 2">два</p> <p v-if="num == 3">три</p> </div>

Можно делать и более сложные условия, например, так (пусть тут age - какой-то возраст):

<div id="app"> <p v-if="age >= 1 && age <= 10">от 1 до 10</p> <p v-if="age >= 11 && age <= 20">от 11 до 20</p> </div>

Пусть в data хранится свойство day, в котором записан текущий день недели. Пусть также у вас есть 7 абзацев, в каждом из которых написано название дня недели. Сделайте так, чтобы на экране был виден только абзац, содержащий название текущего дня недели.

Директива v-else-if

Вместо нескольких v-if можно использовать конструкции v-else-if:

<div id="app"> <p v-if="num == 1">один</p> <p v-else-if="num == 2">два</p> <p v-else-if="num == 3">три</p> <p v-else>что-то другое</p> </div>

Пусть в data хранится следующее:

data: { age: 25, }

Если свойство age меньше 18 - выведите на экран 'подросток', если она от 19 до 25 - выведите на экран 'молодой человек', а если более 26 - выведите на экран 'мужчина'.

Использование <template>

По следующей ссылке изучите раздел Условные группы с использованием v-if и <template>.

Пусть у вас даны 3 абзаца и кнопка. Сделайте так, чтобы по нажатию на кнопку эти абзацы скрывались. Используйте для этого только одну директиву v-if, объединив абзацы тегом <template>.

Директива v-show

По следующей ссылке изучите раздел v-show и раздел v-if в сравнении с v-show.

Директивы v-for и v-if

По следующей ссылке изучите раздел v-for и v-if.