Работа с условиями в фреймворке 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.
Прячем по нажатию
Давайте сделаем так, чтобы элемент спрятался по нажатию на кнопку.
Пусть к директиве 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>
Если вы запустите этот код и нажмете на кнопку - абзац скроется. Аналогичным образом можно реализовать и показ абзаца обратно.
Показ и скрытие
Давайте теперь по первому клику на кнопку будем показывать абзац, а по второму клику на эту же кнопку - прятать. Для этого метод 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>
Теперь по нажатию на кнопку элемент будет то скрываться, то показываться. Проверьте.
Добавим тернарный оператор
Не очень удобно то, что в кнопочке сейчас всегда написан текст 'Нажми'. Давайте сделаем так, чтобы там чередовались слова 'Скрыть' и 'Показать' в зависимости от следующего действия.
Для этого нам необходимо использовать тернарный оператор следующим образом:
<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>
Директива 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.
Сложные условия
В директиве 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>
Директива 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>
Использование <template>
По следующей ссылке изучите раздел Условные группы с использованием v-if и <template>.
Директива v-show
По следующей ссылке изучите раздел v-show и раздел v-if в сравнении с v-show.
Директивы v-for и v-if
По следующей ссылке изучите раздел v-for и v-if.
