Условная отрисовка: v-if, v-else, v-show

В Vue.js условная отрисовка позволяет управлять отображением элементов на странице в зависимости от состояния приложения. Основными директивами для этого являются v-if, v-else-if, v-else и v-show. Каждая из них имеет свои особенности и применяется в разных ситуациях.

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

v-if полностью добавляет или удаляет элемент из DOM в зависимости от булевого выражения. Если условие истинно, элемент создаётся и добавляется в DOM; если ложно — удаляется.

<template>
  <div>
    <p v-if="isLoggedIn">Добро пожаловать, пользователь!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: true
    };
  }
};
</script>

Особенности v-if:

  • Элемент создаётся и уничтожается динамически.
  • Высокая стоимость рендеринга при частых изменениях, так как Vue должен пересоздавать элемент и его дочерние компоненты.
  • Подходит для редких изменений видимости элементов.

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

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

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

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

Ключевые моменты:

  • v-else-if проверяет дополнительное условие, если предыдущее v-if ложно.
  • v-else не имеет условия и выполняется, если все предыдущие условия ложны.
  • Необходимо соблюдать порядок расположения в шаблоне; между v-if и v-else не должно быть других элементов.

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

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

<template>
  <div>
    <p v-show="isVisible">Этот текст можно скрыть</p>
    <button @click="toggle">Переключить видимость</button>
  </div>
</template>

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

Сравнение с v-if:

  • v-show более эффективен при частом переключении видимости.
  • Элемент остаётся в DOM, что позволяет сохранять состояние компонентов.
  • Подходит для элементов, которые часто скрываются и показываются.

Когда использовать v-if и v-show

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

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

Сложные конструкции с условной отрисовкой

В Vue.js можно комбинировать v-if и v-for, но следует учитывать порядок:

<template>
  <ul>
    <li v-for="item in items" :key="item.id" v-if="item.visible">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Элемент 1', visible: true },
        { id: 2, name: 'Элемент 2', visible: false },
        { id: 3, name: 'Элемент 3', visible: true }
      ]
    };
  }
};
</script>

Рекомендации:

  • v-if внутри v-for выполняется для каждого элемента, что может повлиять на производительность при большом количестве элементов.
  • Если элемент часто отображается и скрывается, стоит использовать v-show для уменьшения нагрузки на DOM.

Динамическая логика в условиях

Условия можно вычислять прямо в шаблоне или через вычисляемые свойства:

<template>
  <p v-if="isAdmin">Администраторский доступ</p>
</template>

<script>
export default {
  data() {
    return {
      userRole: 'admin'
    };
  },
  computed: {
    isAdmin() {
      return this.userRole === 'admin';
    }
  }
};
</script>

Преимущества:

  • Улучшает читаемость шаблона.
  • Позволяет сложные вычисления выносить в логику компонента, а не в шаблон.

Итоговые рекомендации по условной отрисовке

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

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

Оглавление