Как добиться условной группы элементов?

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

Как это работает?

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

Вот пример, который помогает понять, как это работает.

Пример кода

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

<template>
  <div>
    <h1>Список пользователей</h1>
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
    <p v-else>Пользователи не найдены.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [] // массив с пользователями будет пустым по умолчанию
    };
  },
  mounted() {
    // Имитируем получение данных
    this.users = [
      { id: 1, name: 'Анна' },
      { id: 2, name: 'Михаил' }
    ];
  }
};
</script>

<style>
h1 {
  color: #42b983;
}
</style>

Объяснение

1. В шаблоне мы используем v-if для проверки длины массива users.
2. Если массив не пустой (users.length истинно), будет отображён unordered list (<ul>), где каждый элемент li создаётся с использованием v-for.
3. Если массив пустой, то сработает v-else, и отобразится сообщение "Пользователи не найдены".

Усложнение примера

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

<template>
  <div>
    <h1>Список пользователей</h1>
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
    <p v-else-if="loading">Загрузка пользователей...</p>
    <p v-else>Пользователи не найдены.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
      loading: true
    };
  },
  mounted() {
    // Симуляция асинхронной загрузки данных
    setTimeout(() => {
      this.users = [
        { id: 1, name: 'Анна' },
        { id: 2, name: 'Михаил' }
      ];
      this.loading = false;
    }, 2000);
  }
};
</script>

В этом примере добавили условие загрузки

1. Мы ввели переменную loading, которая по умолчанию установлена в true.
2. Пока данные загружаются, будет отображаться сообщение "Загрузка пользователей...".
3. По окончании загрузки состояние loading станет false и будет показан список пользователей, если таковые имеются.

Заключение

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