Фото: Bill Craighead на Unsplash
Необхідні умови
- Переконайтеся, що у вас встановлена версія Node.js 18.3 або новіша.
- Вам потрібно створити Vue-додаток, слідуючи цій статті.
Вступ
У Vue ми можемо використовувати прив'язку класів для динамічного додавання CSS класів залежно від умов.
Масив класів
Використовуйте, коли у вас є список класів, які потрібно застосувати залежно від умов.
У шаблоні
На рядку 2 ви можете побачити, що textWhite і bgBlue є станами, тому ви можете динамічно задавати CSS класи у вигляді масиву.
У скрипті
Нічого особливого, просто оголосіть стани, які утримують назви CSS класів.
У стилях
Оголосіть класи, які будуть викликатися з шаблону.
Об'єкт класів
Використовуйте, коли хочете включати чи вимикати класи на основі булевих значень.
У шаблоні
З рядка 3 по 6 ми використовували об'єкт класів, щоб динамічно задавати класи залежно від булевого значення isOnline.
У скрипті
Оголосіть стан isOnline.
У стилях
Оголосіть класи, які будуть викликатися з шаблону.
Запуск проекту
Ви повинні перевірити, які класи додаються та видаляються, використовуючи інспектор елементів.
Готово
Використовуйте Масив класів (Class Array), якщо хочете контролювати класи за допомогою значень станів. Використовуйте Об'єкт класів (Class Object), якщо хочете перемикати класи за допомогою булевих значень.
Попереднє: Слоти
Наступне:
Перекладено з: Class Bindings