Интерполяция и выражения в шаблонах

Vue.js предоставляет мощный механизм для связывания данных с представлением через интерполяцию. Интерполяция позволяет внедрять данные из компонентов напрямую в HTML-шаблоны, обеспечивая реактивное обновление интерфейса при изменении состояния приложения.

Текстовая интерполяция

Основной способ внедрения данных в HTML — использование двойных фигурных скобок:

<div>{{ message }}</div>

Здесь message — это свойство из объекта data компонента. Vue автоматически отслеживает изменения message и обновляет DOM при его модификации.

Можно использовать выражения внутри интерполяции:

<div>{{ message.toUpperCase() }}</div>
<div>{{ 10 + 5 }}</div>

Выражения в шаблонах должны быть простыми и синхронными. Vue запрещает использование управляющих конструкций, таких как if или for, в интерполяциях.

Атрибутная интерполяция

Для динамических значений атрибутов применяется директива v-bind или сокращённая запись ::

<img :src="imageSrc" alt="Изображение">
<a :href="url">{{ linkText }}</a>

Это позволяет напрямую связывать свойства компонента с атрибутами HTML. Любые изменения в imageSrc или url автоматически отражаются в DOM.

Объединение текста и выражений

Интерполяции можно комбинировать с обычным текстом:

<p>Привет, {{ userName }}!</p>
<p>Ваш баланс: {{ balance.toFixed(2) }} USD</p>

Vue гарантирует, что весь текст остаётся реактивным, и пересчитывается при каждом изменении зависимых данных.

Вложенные данные и доступ к объектам

Интерполяция поддерживает доступ к свойствам объектов и массивов:

<div>{{ user.name }}</div>
<div>{{ items[0].title }}</div>

Также можно использовать вызовы методов компонента:

<div>{{ greet(user.name) }}</div>

Методы вызываются как обычные функции, но должны быть определены в объекте methods компонента.

Фильтры (Vue 2)

В Vue 2 существовали фильтры, которые применяются к выражениям интерполяции через символ |:

<p>{{ message | capitalize }}</p>

Фильтры позволяют трансформировать данные перед выводом в шаблон, например, для форматирования текста или чисел. В Vue 3 фильтры официально удалены, их заменяют вычисляемые свойства или методы.

Вычисляемые выражения и реактивность

Интерполяция работает в тесной связке с реактивной системой Vue. Если значение зависит от других реактивных свойств, его лучше выносить в вычисляемое свойство:

computed: {
  fullName() {
    return this.user.firstName + ' ' + this.user.lastName;
  }
}
<p>{{ fullName }}</p>

Это позволяет избежать избыточного вычисления в шаблоне и поддерживать чистоту кода.

Обработка HTML

Иногда требуется вставить HTML-код динамически. Для этого используется директива v-html:

<div v-html="rawHtml"></div>

Важно помнить о безопасности, так как v-html напрямую вставляет HTML и может быть уязвим к XSS-атакам.

Ограничения интерполяции

  • Интерполяции не поддерживают управляющие конструкции (if, for, while).
  • Нельзя использовать асинхронные операции напрямую.
  • Следует избегать сложной логики в шаблонах, вынося её в методы или вычисляемые свойства.

Динамическая привязка классов и стилей

Интерполяция тесно связана с динамическим управлением атрибутами классов и стилей через объектную или массивную синтаксис:

<div :class="{ active: isActive, disabled: !isEnabled }"></div>
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>

В этих случаях Vue вычисляет значения выражений и обновляет соответствующие атрибуты реактивно при изменении состояния.

Итоговая структура интерполяций

  • {{ … }} — для текста и простых выражений.
  • v-bind / : — для динамических атрибутов.
  • Методы и вычисляемые свойства — для сложной логики.
  • v-html — для вставки HTML.
  • Реактивность Vue обеспечивает автоматическое обновление DOM при изменении исходных данных.

Интерполяция является фундаментальным инструментом Vue.js для связывания данных с интерфейсом, создавая чистый, декларативный и реактивный код.

Оглавление