Vue 3

Курс для новичков: Урок 04.


Главная Vue 3 Курс для новичков Vue 3 01 02 03 04 05 06 07 08 09 10 11


Урок 4 :: Conditional Rendering :: Условный Рендеринг


Вот, что мы с Вами сделаем на этом уроке.
Vue Mastery
Пройдем по этой ссылке:
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; добавленного к нему.
les04_pic01.jpg
Цепная Условная Логика Ранее мы рассматривали 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. Обратите внимание, чтобы в консоле браузера не было ошибок.

Теперь Нажмите здесь для перехода к следующему уроку ➳

... или ...