Как добиться условной группы элементов?
В 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>
Объяснение
v-if для проверки длины массива users.users.length истинно), будет отображён unordered list (<ul>), где каждый элемент li создаётся с использованием v-for.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>
В этом примере добавили условие загрузки
loading, которая по умолчанию установлена в true.loading станет false и будет показан список пользователей, если таковые имеются.Заключение
Использование условных групп элементов в Vue.js — это мощный инструмент для динамической работы с DOM. Благодаря директивам v-if, v-else-if и v-else, вы сможете гибко управлять тем, какие элементы отображаются, улучшая взаимодействие пользователей с вашим приложением.