Динамические и множественные привязки v-bind
Динамические имена атрибутов :[dynamicAttr], объектный синтаксис v-bind, одновременная привязка нескольких атрибутов
«Динамические и множественные привязки v-bind» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Динамическая привязка атрибутов
Директива v-bind (сокращённая запись :) связывает атрибут HTML с реактивным значением. Она позволяет задавать динамические классы, стили и даже динамические имена атрибутов.
Базовая привязка v-bind
Связывайте любой атрибут с выражением. Когда значение меняется, Vue обновляет атрибут.
<img :src="imageUrl" :alt="description" />Привязка классов: синтаксис объекта
Для классов синтаксис объекта переключает класс в зависимости от истинности значения. Ключом является имя класса, а значение определяет, применяется ли он.
<div :class="{ active: isActive, disabled: isDisabled }"></div>Привязка классов: синтаксис массива
Синтаксис массива применяет список классов. Сочетайте статические строки и реактивные переменные или вложите объект для условных элементов.
<div :class="[baseClass, isActive ? activeClass : '']"></div>Объединение массива и объекта
Вы можете вложить форму объекта в массив, чтобы получить преимущества обоих вариантов: постоянные классы и условные классы.
<div :class="[baseClass, { active: isActive }]"></div>Привязка стилей: синтаксис объекта
Связывайте встроенные стили с объектом. Используйте имена свойств в camelCase (или в kebab-case в кавычках). Значения могут быть реактивными.
<div :style="{ color: textColor, fontSize: size + 'px' }"></div>Привязка стилей: массив объектов
Передавайте массив объектов стилей, чтобы объединить несколько источников стилей, например базовый стиль и переопределение темы.
<div :style="[baseStyles, overrideStyles]"></div>Одновременная привязка множества атрибутов
v-bind без аргумента добавляет к элементу весь объект атрибутов. Каждый ключ становится атрибутом.
<script setup>
const attrs = { id: 'main', class: 'box', 'data-role': 'panel' }
</script>
<template>
<div v-bind="attrs"></div>
</template>Динамические имена атрибутов
Используйте квадратные скобки, чтобы вычислять само имя атрибута во время выполнения. Выражение в скобках вычисляется и используется как ключ атрибута.
<script setup>
const attrName = 'title'
const attrValue = 'Hello'
</script>
<template>
<div :[attrName]="attrValue"></div>
</template>Когда что использовать
- Синтаксис объекта для классов — переключение нескольких классов по условию.
- Синтаксис массива для классов — объединение базового класса с условными классами.
v-bind="obj"— передача целого набора атрибутов.- Динамическое имя
:[name]— когда ключ атрибута определяется во время выполнения.
Объединённый пример
Этот элемент одновременно использует динамический класс, динамический стиль и распределение атрибутов — всё это остаётся реактивным.
<div
:class="[base, { active: isActive }]"
:style="{ color: textColor }"
v-bind="extraAttrs"
></div>Быстрая проверка
Проверьте свои знания о v-bind.
Итоги
Вы изучили возможности v-bind:
- Синтаксис объекта для классов переключает классы по условию, а синтаксис массива объединяет их.
- Привязка стилей использует объекты (camelCase) или массивы объектов.
v-bind="obj"добавляет все атрибуты из объекта.:[name]="val"связывает динамически именованный атрибут.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 42
- Уроки
- 156
Часто задаваемые вопросы
Урок «Динамические и множественные привязки v-bind» бесплатный?
Да — полный текст урока «Динамические и множественные привязки v-bind» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Динамические и множественные привязки v-bind»?
Динамические имена атрибутов :[dynamicAttr], объектный синтаксис v-bind, одновременная привязка нескольких атрибутов Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Динамические и множественные привязки v-bind»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- v-model: внутреннее устройство двусторонней привязки
- Модификаторы событий v-on
- Динамические и множественные привязки v-bind
- Написание пользовательских директив