Когда создаёшь интерактивное веб-приложение, одна из самых распространённых задач — управлять видимостью элементов на экране. Иногда нужно показать один блок, а скрыть другой в зависимости от каких-то условий. Например, от состояния данных, статуса пользователя или нажатой кнопки. В Vue 3 это реализуется очень просто с помощью условной отрисовки.

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

Основные директивы для условной отрисовки

Vue.js предоставляет две ключевые директивы для работы с условной отрисовкой: v-if и v-show. Каждая из них имеет свои особенности, и важно понимать, когда лучше использовать одну, а когда — другую.

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

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

Пример:

<template>
  <div>
    <button @click="toggleVisibility">Toggle Visibility</button>
    <p v-if="isVisible">Этот текст виден только тогда, когда isVisible = true</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(false);

const toggleVisibility = () => {
  isVisible.value = !isVisible.value;
};
</script>

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

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

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

Пример:

<template>
  <div>
    <button @click="toggleVisibility">Toggle Visibility</button>
    <p v-show="isVisible">Этот текст виден или скрыт, но всегда присутствует в DOM</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(false);

const toggleVisibility = () => {
  isVisible.value = !isVisible.value;
};
</script>

Разница между v-if и v-show в том, что первый рендерит или удаляет элемент, а второй — просто скрывает его. Поэтому v-show лучше использовать, когда нужно просто скрывать и показывать элемент часто, а v-if — когда рендеринг происходит реже и важна оптимизация.

v-else и v-else-if: дополнительная логика для условий

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

Пример с несколькими условиями:

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

<script setup>
import { ref } from 'vue';

const status = ref('loading'); // Попробуйте 'loading', 'success', 'error' или другое значение.
</script>

Здесь мы проверяем несколько условий: если статус «loading», показываем соответствующее сообщение, если «success» — выводим текст о успешной загрузке, и так далее. Это позволяет легко управлять состоянием интерфейса.

Пример практического использования

Допустим, мы создаём форму логина. Нам нужно показывать поле для ввода пароля только тогда, когда пользователь вводит корректное имя. Это идеальная ситуация для использования условной отрисовки.

<template>
  <div>
    <label for="username">Username:</label>
    <input id="username" v-model="username" @input="validateUsername" />
    
    <div v-if="isUsernameValid">
      <label for="password">Password:</label>
      <input id="password" type="password" v-model="password" />
    </div>
    
    <p v-else style="color: red;">Имя пользователя некорректно.</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const username = ref('');
const password = ref('');
const isUsernameValid = ref(false);

const validateUsername = () => {
  // Допустим, корректным именем пользователя является "admin"
  isUsernameValid.value = username.value === 'admin';
};
</script>

В этом примере поле для ввода пароля появляется только тогда, когда пользователь ввёл корректное имя пользователя (в нашем случае это «admin»). Если имя введено неверно, Vue покажет сообщение об ошибке.

Условная отрисовка с использованием списков

Когда дело доходит до работы со списками, условная отрисовка помогает не только управлять отдельными элементами, но и контролировать их отображение в зависимости от данных.

Пример списка с условной отрисовкой:

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index" v-if="item.isActive">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([
  { name: 'Item 1', isActive: true },
  { name: 'Item 2', isActive: false },
  { name: 'Item 3', isActive: true }
]);
</script>

В этом примере мы выводим только те элементы списка, у которых свойство isActive равно true. Это простой способ управлять видимостью большого количества элементов без лишних усилий.

Производительность и оптимизация

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

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

Итог: выбор между v-if и v-show

• Если элемент должен рендериться только при определённом условии.
• Когда элементы редко появляются и исчезают.
• Если нужно оптимизировать производительность за счёт удаления элементов из DOM.

• Если элемент должен часто скрываться и показываться.
• Когда важна скорость переключения видимости, а не рендеринг.

Оба подхода очень полезны, и ваш выбор зависит от конкретного случая. v-if даёт контроль над рендерингом элементов, а v-show обеспечивает мгновенное скрытие/отображение.

Заключение

Условная отрисовка — это мощный инструмент в Vue 3, который позволяет управлять тем, что пользователь видит на экране. Благодаря v-if и v-show вы можете гибко реагировать на изменения данных и обеспечивать удобство интерфейса. Главное — выбрать правильный инструмент для вашей задачи!

Далее мы разберемся с не менее важной задачей — отрисовкой списков.