Условные выражения в шаблонах

Библиотека Petite-Vue предоставляет удобные инструменты для работы с динамическими шаблонами. Одной из ключевых возможностей является использование условных выражений для динамической смены контента в зависимости от различных условий. Условные выражения позволяют создавать интерактивные и адаптивные интерфейсы, где компоненты отображаются или скрываются в зависимости от состояния данных.

v-if и v-else

Основной механизм для условного рендеринга в Petite-Vue реализован через директивы v-if, v-else-if и v-else. Эти директивы позволяют условно рендерить элементы в зависимости от значения выражения.

<div v-if="isVisible">Этот элемент видим, если isVisible равно true</div>
<div v-else>Этот элемент отображается, если isVisible равно false</div>

Пример:

<div v-if="user.isLoggedIn">
  Привет, {{ user.name }}!
</div>
<div v-else>
  Пожалуйста, войдите в систему.
</div>

В данном примере первый блок будет отображаться только в том случае, если user.isLoggedIn истинно, в противном случае отобразится блок с предложением войти в систему.

v-show

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

<div v-show="isVisible">Этот элемент видим, если isVisible равно true</div>

Примечание: В отличие от v-if, v-show не влияет на процесс рендеринга элемента, а просто изменяет его видимость. Это делает v-show более подходящим для ситуаций, когда требуется быстрое изменение видимости элементов.

Условие с несколькими ветвями

Для более сложных условий можно использовать комбинацию v-if, v-else-if и v-else. Такие конструкции позволяют создавать более сложные ветвления, улучшая гибкость рендеринга.

<div v-if="status === 'loading'">Загрузка...</div>
<div v-else-if="status === 'error'">Ошибка загрузки данных</div>
<div v-else>Данные загружены</div>

Здесь происходит проверка состояния переменной status и в зависимости от её значения отображается соответствующее сообщение.

Условный рендеринг с переменными

Часто бывает необходимо работать с более сложными выражениями в условии. В таких случаях можно использовать вычисляемые свойства или методы для передачи значений в директивы.

Пример:

<div v-if="isLoggedIn && hasPermission">Добро пожаловать, у вас есть доступ к этим данным.</div>

Если оба условия (isLoggedIn и hasPermission) истинны, то блок будет отрендерен.

Пример с вычисляемым свойством:

<div v-if="isVisibleAndLoaded">Контент доступен</div>
const app = PetiteVue.createApp({
  data() {
    return {
      isVisible: true,
      isLoaded: true
    };
  },
  computed: {
    isVisibleAndLoaded() {
      return this.isVisible && this.isLoaded;
    }
  }
});

В этом примере вычисляемое свойство isVisibleAndLoaded возвращает результат логической операции, объединяя значения двух других свойств.

Условное рендеринг в списках

Часто приходится работать с динамическими списками, где элементы могут отображаться или скрываться в зависимости от условий. В этом случае можно использовать сочетание v-for и условных выражений.

Пример:

<ul>
  <li v-for="item in items" v-if="item.isActive">{{ item.name }}</li>
</ul>

Здесь в списке будут отображаться только те элементы, которые соответствуют условию item.isActive.

Условные выражения с тернарным оператором

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

<button v-bind:class="isActive ? 'btn-active' : 'btn-inactive'">Кнопка</button>

В этом примере класс элемента изменяется в зависимости от значения переменной isActive. Это позволяет эффективно управлять состоянием элементов без необходимости использовать несколько блоков с v-if.

Логика с несколькими условиями

Petite-Vue позволяет использовать не только простые условия, но и комбинированные логические выражения для создания более сложных конструкций.

<div v-if="isAdmin && isLoggedIn">Добро пожаловать, администратор</div>
<div v-else-if="isLoggedIn">Добро пожаловать</div>
<div v-else>Пожалуйста, войдите в систему</div>

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

Заключение

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

Оглавление