Привязка атрибутов и классов
Динамически привязывайте атрибуты, классы и стили
«Привязка атрибутов и классов» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.
Привязка классов и стилей
Часто требуется изменять класс или стиль элемента в зависимости от его состояния.
Vue специально обрабатывает :class и :style, поэтому им можно передавать не только строки, но и объекты и массивы.
Синтаксис объекта для :class
Передайте объект в :class. Ключи являются именами классов, а элементы с истинными значениями добавляются.
<div :class="{ active: isActive, disabled: isDisabled }">
Status box
</div>
<!-- if isActive is true, the "active"
class is applied -->Сочетание статических и динамических классов
Статический атрибут class и динамический :class объединяются.
<div class="card" :class="{ highlighted: isSelected }">
Always has "card";
adds "highlighted" when selected.
</div>Синтаксис массива для :class
Передайте массив, чтобы применить список классов.
<div :class="[baseClass, themeClass]">Box</div>
<!-- data:
baseClass = "panel"
themeClass = "dark" -->Условные выражения в массиве
Внутри массива можно использовать условные выражения.
<div :class="[isActive ? 'active' : '', errorClass]">
...
</div>
<!-- or nest an object inside the array -->
<div :class="[baseClass, { active: isActive }]">
...
</div>Привязка встроенных стилей
Директива :style связывает встроенные стили с объектом.
Используйте имена свойств в формате camelCase, например fontSize.
<p :style="{ color: textColor, fontSize: size + 'px' }">
Styled text
</p>
<!-- data: textColor = "red", size = 18 -->:style с массивом
Можно передать массив объектов стилей, и Vue объединит их.
<div :style="[baseStyles, overrideStyles]">
Merged styles
</div>Автоматическое добавление префиксов
Если свойству CSS нужны префиксы поставщика, Vue может автоматически добавить их, если браузер их поддерживает.
- Вы указываете стандартное свойство
- Vue при необходимости применяет правильный префикс
Благодаря этому привязки стилей остаются чистыми и понятными.
Динамическая привязка атрибутов
Любой атрибут можно динамически привязать с помощью :attr.
<img :src="photoUrl" :alt="photoCaption" />
<input :placeholder="hintText" :maxlength="limit" />
<a :href="link" :target="openInNewTab ? '_blank' : '_self'">Go</a>Булевы атрибуты
Для булевых атрибутов, например disabled, Vue добавляет атрибут только тогда, когда значение истинно.
<button :disabled="isSubmitting">Submit</button>
<!-- if isSubmitting is false,
the disabled attribute is removed -->Условная привязка нескольких классов
Практический пример одновременного переключения нескольких классов.
<li
class="todo"
:class="{
done: task.completed,
overdue: task.isLate,
priority: task.urgent
}"
>
{{ task.title }}
</li>Быстрая проверка
Проверьте, насколько хорошо Вы поняли привязки классов и стилей.
Итоги: привязки атрибутов и классов
Вы изучили динамические привязки:
- Синтаксис объекта для :class переключает классы в зависимости от истинности значения
- Синтаксис массива для :class применяет список классов
- :style связывает встроенные стили с ключами в формате camelCase
- Любой атрибут можно привязать с помощью :attr
- Булевы атрибуты появляются только при истинном значении
Далее: основы компонентов и взаимодействие между ними.
Часто задаваемые вопросы
Урок «Привязка атрибутов и классов» бесплатный?
Да — полный текст урока «Привязка атрибутов и классов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.
Чему я научусь в уроке «Привязка атрибутов и классов»?
Динамически привязывайте атрибуты, классы и стили Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.
Сколько времени занимает урок «Привязка атрибутов и классов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Интерполяция и директивы
- Условия и циклы
- Привязка атрибутов и классов