13.07.2020 15:18
ru_vds 6 5500 Источник
Продолжаем наш учебный курс по Vue, которые порекомендовала Наталья Теплухина, Staff Engineer в Gitlab и Core Team Member фреймворка Vue (Q/A сессия с Наташей прошла в нашем инстаграм, а расшифровку можно прочитать здесь).

На третьем уроке речь пойдёт об условном рендеринге. О том, как выводить что-либо на странице только в том случае, если выполняется какое-то условие.



> Vue.js для начинающих, урок 1: экземпляр Vue
> Vue.js для начинающих, урок 2: привязка атрибутов

Цель урока


Нам нужно, чтобы в карточке товара выводилась бы надпись, сообщающая посетителю о том, есть товар на складе, или нет. Если товар на складе есть, должна выводиться надпись 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, уже планируете решить с помощью этого фреймворка?

> Часть 1: Создание экземпляра Vue
> Часть 2: Привязка атрибутов в Vue