v-if и условный рендеринг

В Petite-Vue директива v-if используется для условного отображения элементов DOM. Она позволяет динамически добавлять или удалять элементы из дерева документа в зависимости от значения выражения.

Синтаксис:

<div v-if="условие">
  Этот блок отображается только если условие истинно
</div>

Значение условие должно быть логическим или выражением, которое возвращает true или false. Если значение истинно, элемент создаётся и вставляется в DOM; если ложно — элемент полностью удаляется из DOM.

<div v-if="isVisible">
  Содержимое видно
</div>
const App = {
  isVisible: true
}

petite(App)

Использование v-else и v-else-if

Для управления альтернативными вариантами отображения Petite-Vue поддерживает конструкции v-else и v-else-if.

  • v-else отображается, если предыдущее условие v-if ложно.
  • v-else-if позволяет проверять дополнительные условия.

Пример:

<div v-if="score > 80">Отлично</div>
<div v-else-if="score > 50">Хорошо</div>
<div v-else>Нужно улучшить</div>
const App = {
  score: 65
}

petite(App)

В этом примере отображается блок с текстом “Хорошо”, так как значение score попадает в диапазон второго условия.

Логика рендеринга

v-if полностью управляет созданием и уничтожением элемента DOM. Это отличается от v-show, который только меняет CSS-свойство display.

  • v-if подходит для блоков, которые редко меняются, так как повторное создание DOM требует больше ресурсов.
  • v-show предпочтительнее для частых переключений видимости.

Использование с массивами и методами

Условный рендеринг можно комбинировать с вычисляемыми значениями, методами или состояниями, изменяемыми динамически.

<div v-if="hasItems()">Есть элементы</div>
<div v-else>Элементы отсутствуют</div>
const App = {
  items: [1, 2, 3],
  hasItems() {
    return this.items.length > 0
  }
}

petite(App)

Здесь метод hasItems() возвращает логическое значение, которое определяет, какой блок будет отображён.

Вложенные условия

v-if можно использовать вложенно, чтобы создавать сложные условные структуры.

<div v-if="user">
  <p v-if="user.isAdmin">Администратор</p>
  <p v-else>Пользователь</p>
</div>
<div v-else>
  Нет пользователя
</div>
const App = {
  user: { isAdmin: false }
}

petite(App)

Если объект user существует, проверяется его свойство isAdmin и отображается соответствующий текст.

Рендеринг нескольких элементов

Если требуется управлять несколькими элементами одновременно, используется обёртка <template>:

<template v-if="isLoggedIn">
  <h1>Добро пожаловать</h1>
  <p>Вы вошли в систему</p>
</template>

<template> не создаёт отдельный элемент в DOM, но позволяет условно рендерить несколько дочерних элементов.

Советы по производительности

  • Избегать чрезмерного использования v-if для большого количества мелких элементов в списках. В таких случаях лучше использовать v-show или оптимизировать структуру данных.
  • Для сложных условий целесообразно выносить логику в методы или вычисляемые свойства, чтобы шаблон оставался читаемым.
  • Комбинирование v-if с v-for требует аккуратности: проверка условия должна идти до или внутри цикла, иначе возможны лишние вычисления.

Итоговые принципы работы

  • v-if контролирует наличие элемента в DOM, а не только его видимость.
  • v-else и v-else-if позволяют строить цепочки условий.
  • Вложенные v-if и <template> дают гибкость при сложной структуре интерфейса.
  • Производительность зависит от частоты изменений и объёма рендеринга.

Использование v-if в Petite-Vue обеспечивает чистый и управляемый DOM, упрощает динамическую логику отображения и делает шаблоны более декларативными.

Оглавление