Продолжаем наш учебный курс по Vue, которые порекомендовала Наталья Теплухина, Staff Engineer в Gitlab и Core Team Member фреймворка Vue (Q/A сессия с Наташей прошла в нашем инстаграм, а расшифровку можно прочитать здесь).
На третьем уроке речь пойдёт об условном рендеринге. О том, как выводить что-либо на странице только в том случае, если выполняется какое-то условие.
→ Vue.js для начинающих, урок 1: экземпляр Vue
→ Vue.js для начинающих, урок 2: привязка атрибутов
→ Vue.js для начинающих, урок 3: условный рендеринг
→ Vue.js для начинающих, урок 4: рендеринг списков
→ Vue.js для начинающих, урок 5: обработка событий
→ Vue.js для начинающих, урок 6: привязка классов и стилей
→ Vue.js для начинающих, урок 7: вычисляемые свойства
→ Vue.js для начинающих, урок 8: компоненты
Нам нужно, чтобы в карточке товара выводилась бы надпись, сообщающая посетителю о том, есть товар на складе, или нет. Если товар на складе есть, должна выводиться надпись
Вот код, с которого мы начнём работу. Он, как обычно, находится в файле
В файле
Обратите внимание на то, что в объект
При разработке веб-приложений часто бывает нужно, чтобы элемент отображался бы на странице в зависимости от выполнения некоего условия. Например, если запасы товара закончились, в карточке товара нужно об этом сообщить.
Соответствующие сообщения планируется оформить в качестве элементов
Наша задача заключается в том, чтобы вывести один из них в том случае, если товар на складе есть, а другой — в ситуации, когда товара на складе нет.
В Vue решение этой задачи выглядит просто и понятно.
Как вы уже знаете, данные, указывающие на наличие или отсутствие товара на складе, описаны в
Для того чтобы указать системе на то, какой именно элемент
Если в
На складе есть запасы товара
Замечательно! Только что мы воспользовались механизмом условного рендеринга для вывода сведений о товаре. Задачу мы решили. Но не будем останавливаться на достигнутом и продолжим исследование условного рендеринга.
Наш механизм условного рендеринга, основанный на директивах
Предположим, что в объекте
Анализируя это свойство с помощью JavaScript-выражений, заключённых в кавычки, мы можем сообщать посетителям страницы более точные сведения о товаре:
В данной ситуации на страницу выведется первый элемент
Если некий элемент страницы нужно часто скрывать и отображать, это значит, что для реализации этого механизма имеет смысл взглянуть на директиву
Этот метод отличается более высокой производительностью, чем управление элементами с использованием
Вот как выглядит применение этой директивы:
Тот вариант решения нашей задачи, в котором использовались директивы
Добавьте в объект с данными свойство
Вот заготовка, которую вы можете использовать для решения этой задачи.
Вот решение задачи.
Сегодня вы узнали об условном рендеринге с использованием механизмов Vue. А именно, речь шла о следующем:
Есть ли у вас какая-то задача, которую вы, начав знакомство с Vue, уже планируете решить с помощью этого фреймворка?
→ Vue.js для начинающих, урок 1: экземпляр Vue
→ Vue.js для начинающих, урок 2: привязка атрибутов
→ Vue.js для начинающих, урок 3: условный рендеринг
→ Vue.js для начинающих, урок 4: рендеринг списков
→ Vue.js для начинающих, урок 5: обработка событий
→ Vue.js для начинающих, урок 6: привязка классов и стилей
→ Vue.js для начинающих, урок 7: вычисляемые свойства
→ Vue.js для начинающих, урок 8: компоненты
На третьем уроке речь пойдёт об условном рендеринге. О том, как выводить что-либо на странице только в том случае, если выполняется какое-то условие.
→ Vue.js для начинающих, урок 1: экземпляр Vue
→ Vue.js для начинающих, урок 2: привязка атрибутов
→ Vue.js для начинающих, урок 3: условный рендеринг
→ Vue.js для начинающих, урок 4: рендеринг списков
→ Vue.js для начинающих, урок 5: обработка событий
→ Vue.js для начинающих, урок 6: привязка классов и стилей
→ Vue.js для начинающих, урок 7: вычисляемые свойства
→ Vue.js для начинающих, урок 8: компоненты
Цель урока
Нам нужно, чтобы в карточке товара выводилась бы надпись, сообщающая посетителю о том, есть товар на складе, или нет. Если товар на складе есть, должна выводиться надпись
In Stock
. Если его на складе нет — надпись Out of Stock
. Решение о выводе той или иной надписи должно приниматься на основе данных, хранящихся в приложении.Начальный вариант кода
Вот код, с которого мы начнём работу. Он, как обычно, находится в файле
index.html
, в теге <body>
:<div id="app">
<div class="product">
<div class="product-image">
<img :src="image" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
В файле
main.js
, при настройке экземпляра Vue, будет применяться следующий объект с данными:data: {
product: "Socks",
image: "./assets/vmSocks-green.jpg",
inStock: true
}
Обратите внимание на то, что в объект
data
добавлено новое свойство. Это — свойство inStock
, хранящее логическое значение true
.Задача
При разработке веб-приложений часто бывает нужно, чтобы элемент отображался бы на странице в зависимости от выполнения некоего условия. Например, если запасы товара закончились, в карточке товара нужно об этом сообщить.
Соответствующие сообщения планируется оформить в качестве элементов
<p>
. Это значит, что где-то в index.html
будут следующие элементы:<p>In Stock</p>
<p>Out of Stock</p>
Наша задача заключается в том, чтобы вывести один из них в том случае, если товар на складе есть, а другой — в ситуации, когда товара на складе нет.
Решение задачи
В Vue решение этой задачи выглядит просто и понятно.
Как вы уже знаете, данные, указывающие на наличие или отсутствие товара на складе, описаны в
main.js
, в объекте data
:inStock: true
Для того чтобы указать системе на то, какой именно элемент
<p>
нужно рендерить, мы можем воспользоваться директивами v-if
и v-else
. Это значит, что в index.html
попадёт следующее:<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
Если в
inStock
содержится истинное значение, выведется первый элемент <p>
. В противном случае будет выведен второй элемент. В нашем случае в inStock
записано значение true
, поэтому выведется In Stock
.На складе есть запасы товара
Замечательно! Только что мы воспользовались механизмом условного рендеринга для вывода сведений о товаре. Задачу мы решили. Но не будем останавливаться на достигнутом и продолжим исследование условного рендеринга.
Директива v-else-if
Наш механизм условного рендеринга, основанный на директивах
v-if
и v-else
, можно расширить, добавив в него ещё один уровень логики. Сделать это можно с помощью директивы v-else-if
. Для того чтобы это продемонстрировать, давайте немного усложним наш пример.Предположим, что в объекте
data
, в main.js
, имеются сведения о количестве товара. Они хранятся в свойстве inventory
:inventory: 100
Анализируя это свойство с помощью JavaScript-выражений, заключённых в кавычки, мы можем сообщать посетителям страницы более точные сведения о товаре:
<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>
В данной ситуации на страницу выведется первый элемент
<p>
, так как соответствующее ему выражение оказывается истинным.Директива v-show
Если некий элемент страницы нужно часто скрывать и отображать, это значит, что для реализации этого механизма имеет смысл взглянуть на директиву
v-show
. Элемент с такой директивой всегда будет присутствовать в DOM, но видимым он будет только в том случае, если условие, переданное директиве, окажется истинным. Фактически, речь идёт о том, что, благодаря использованию этой директивы, к элементу, по условию, будет применяться CSS-свойство display: none
.Этот метод отличается более высокой производительностью, чем управление элементами с использованием
v-if
и v-else
.Вот как выглядит применение этой директивы:
<p v-show="inStock">In Stock</p>
Тот вариант решения нашей задачи, в котором использовались директивы
v-if
и v-else
, нас устраивает. Поэтому мы остановимся на нём и не будем ничего менять.Практикум
Добавьте в объект с данными свойство
onSale
. Оно должно использоваться для управления рендерингом элемента <span>
, выводящего текст On Sale
и сообщающего посетителям о распродаже.Вот заготовка, которую вы можете использовать для решения этой задачи.
Вот решение задачи.
Итоги
Сегодня вы узнали об условном рендеринге с использованием механизмов Vue. А именно, речь шла о следующем:
- Существуют директивы Vue, позволяющие выводить элементы по условию:
- v-if
- v-else-if
- v-else
- v-show
- При работе с директивами можно пользоваться JavaScript-выражениями, передаваемыми им в кавычках.
- Если выражение, передаваемое директиве в кавычках, является истинным, элемент выводится.
- Директива
v-show
влияет только на видимость элемента, она не вставляет элементы в DOM и не удаляет элементы из DOM.
Есть ли у вас какая-то задача, которую вы, начав знакомство с Vue, уже планируете решить с помощью этого фреймворка?
→ Vue.js для начинающих, урок 1: экземпляр Vue
→ Vue.js для начинающих, урок 2: привязка атрибутов
→ Vue.js для начинающих, урок 3: условный рендеринг
→ Vue.js для начинающих, урок 4: рендеринг списков
→ Vue.js для начинающих, урок 5: обработка событий
→ Vue.js для начинающих, урок 6: привязка классов и стилей
→ Vue.js для начинающих, урок 7: вычисляемые свойства
→ Vue.js для начинающих, урок 8: компоненты