Условные директивы в Vue.js

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

1. Директива v-if

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

Пример использования v-if

<template>
  <div>
    <p v-if="isVisible">Этот элемент виден!</p>
    <button @click="toggleVisibility">Переключить видимость</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

В этом примере, когда isVisible равно true, сообщение будет отображаться. Нажатие на кнопку изменит значение isVisible, что, в свою очередь, изменит видимость элемента.

2. Директива v-else-if и v-else

Эти директивы работают вместе с v-if для создания цепочек условий.

Пример использования v-else-if и v-else

<template>
  <div>
    <p v-if="status === 'loading'">Загрузка...</p>
    <p v-else-if="status === 'success'">Данные загружены успешно!</p>
    <p v-else>Произошла ошибка!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'loading'
    };
  }
};
</script>

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

3. Директива v-show

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

Пример использования v-show

<template>
  <div>
    <p v-show="isVisible">Я виден, но не удалён из DOM!</p>
    <button @click="toggleVisibility">Показать/Скрыть</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

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

Заключение

Условные директивы в Vue.js — это мощный инструмент для создания динамических интерфейсов. v-if идеально подходит для случаев, когда элемент должен быть полностью удалён из DOM, в то время как v-show удобен для переключения видимости элементов без изменений в DOM-структуре. Используйте v-else-if и v-else, чтобы создавать гибкие условия отображения.