Урок 4 :: Conditional Rendering :: Условный Рендеринг
Вот, что мы с Вами сделаем на этом уроке.
Пройдем по этой ссылке:
Conditional Rendering ➳
... Все внимательно послушаем, посмотрим, прочитаем.
Затем сделаем конспект (мой см ниже).
Конспект
Условный РендерингВ этом уроке мы рассмотрим концепцию условного рендеринга (отображения).
Чтобы начать этот урок, вы можете либо получить программой git коммандой checkout исходный код в ветке
L4-start
репозитория, либо перейти в CodePen, чтобы взять файлы там.
Примечание переводчика
Чтобы перейти на ветку с файлами начала урока 4 выполните команду:
git checkout L4-start
Наша Цель
Мы хотим отображать различные HTML-элементы в зависимости от условия. Мы будем отображать тег
p
с надписью “in stock”(“в наличии”), когда наш продукт есть в наличии, или тег с надписью “нет в наличии” (“out of stock”), когда его нет.
Отображать или не отображать
В нашем index.html файл, мы добавим два новых тега
p
.
📄 index.html
<p>In Stock</p> <p>Out of Stock</p>
Мы хотим, чтобы отображался только один из них в зависимости от того, есть ли наш продукт на складе или нет, поэтому мы перейдем в объект данных нашего приложения Vue и добавим новое свойство
InStock
с логическим значением true
.
📄 main.js
const app = Vue.createApp({ data() { return { product: 'Socks', image: './assets/images/socks_blue.jpg', inStock: true // new data property // } } })
Теперь, когда мы добавили элементы, которые мы хотим условно отобразить, и условие (InStock), которое мы будем использовать, чтобы решить, какой из них отображать, мы готовы узнать о другой директиве Vue.
Директива v-if
Мы можем добавить директиву
v-if
к элементу, чтобы отобразить его на основе выполнения условия, например, так:
<p v-if="inStock">In Stock</p>
Теперь этот элемент будет отображаться только в том случае, если свойство
inStock
имеет значение true
.
Мы можем объединить директиву
v-if
с ее дочерней директивой v-else
, чтобы отобразить другой элемент в качестве запасного варианта, если первое условие окажется ложным.
📄 index.html
<p v-if="inStock">In Stock</p> <p v-else>Out of Stock</p>
Теперь, если значение
InStock
равно false
, мы увидим, что на странице отображается “Out of Stock” (“Нет в наличии").
Показать и скрыть
Стоит отметить, что вам не всегда нужно соединять
v-if
с v-else
. Существует множество вариантов использования, в которых вам не нужен запасной элемент для визуализации. В этих случаях иногда лучше использовать директиву v-show
.
📄 index.html
<p v-show="inStock">In Stock</p>
Директива
v-show
используется для переключения видимости элемента вместо того, чтобы полностью добавлять и удалять элемент из DOM, как это делает v-if
.
Как вы можете себе представить, это более эффективный вариант, если у вас есть что-то, что часто выключается и отображается на экране. Мы можем проверить это, установив для
InStock
значение false
и просмотрев элемент в Инструментах разработчика браузера. Когда используется v-show
, мы видим, что элемент все еще присутствует в DOM, но теперь он скрыт с помощью встроенного стиля display: none;
добавленного к нему.
Цепная Условная Логика Ранее мы рассматривали
v-if
с помощью v-else
, теперь давайте посмотрим, как мы можем добавить дополнительные уровни условной логики.
Для этого мы заменим свойство
InStock
(на складе) на свойство inventory
(инвентарь):
📄 main.js
const app = Vue.createApp({ data() { return { ... inventory: 100 }
Поскольку наше условие (
inventory
- инвентарь, количество запасов) теперь является целым числом, мы можем использовать немного более сложную логику в нашем выражении. Например:
📄 index.html
<p v-if="inventory > 10">In Stock</p> <p v-else>Out of Stock</p>
Теперь мы будем отображать первый тег p только в том случае, если
inventory
(количество запасов) превышает 10
.
Допустим, мы хотим отобразить новое сообщение, когда продукт почти распродан. В этой ситуации мы могли бы добавить еще один условный уровень, где мы следим за тем, чтобы запасы (значение
inventory
) были ниже 10
, но выше 0
.
📄 index.html
<p v-if="inventory > 10">In Stock</p> <p v-else-if="inventory <= 10 && inventory > 0">Almost sold out!</p> <p v-else>Out of Stock</p>
Директива v-else-if дает нам средний уровень логики. Таким образом, в этом примере, если бы inventory был равен 8, этот тег p был бы визуализирован.
Конечно, если запасы равны нулю, мы по умолчанию установим окончательный уровень v-else и отобразим “Нет в наличии” (“Out of stock”).
Задача кодирования
Мы подошли к концу этого урока, теперь будем решать новые задачи кодирования.
Вот, что надо сделать.
Добавьте логическое значение onSale в объект данных.
Используйте onSale для условного отображения тега p с надписью “Продается” (“On Sale”) всякий раз, когда onSale соответствует действительности.
Вы можете найти код решения, загрузив L4-end ветвь репозитория или просмотрев решение в Codepen.
Чтобы перейти на ветку с файлами окончания урока 4 выполните команду:
git checkout L4-end
Код файла index.html данного урока
<div id="app"> <div class="nav-bar"></div> <div class="product-display"> <div class="product-container"> <div class="product-image"> <img v-bind:src="image"> </div> <div class="product-info"> <h1>{{ product }}</h1> <p v-if="inventory > 10">In Stock :: Есть в продаже</p> <p v-else-if="inventory <= 10 && inventory > 0"> Almost sold out! Почти все продано!</p> <p v-else>Out of Stock</p> <!-- solution --> <p v-if="onSale">On Sale!</p> <!-- solution --> </div> </div> </div> </div> <!-- Import App --> <script src="main.js"></script> <!-- Mount App --> <script> const mountedApp = app.mount('#app') </script>
Код файла main.js данного урока
const app = Vue.createApp({ data() { return { product: 'Socks :: Голубые Носки', image: '../assets/images/socks_blue.jpg', inventory: 100, // solution onSale: true // solution } } })
Результат выполнения данного урока
{{ product }}
In Stock :: Есть в продаже
Almost sold out! Почти все продано!
Out of Stock
On Sale!
Примечание переводчика
1. Я слегка меняю контент оригинальных файлов курса для тренировки, проверки русификации и т.д.
2. Код для
HTML
я размещаю в этом файле между тегами body
.
3. Обратите внимание, чтобы в консоле браузера не было ошибок.
Теперь Нажмите здесь для перехода к следующему уроку ➳
... или ...