x-bind: атрибуты и классы

Директива x-bind записывает значение выражения в атрибут элемента и обновляет его при изменении данных. Так из данных меняют href, disabled, src, а главное — классы: зачёркнутая выполненная задача, активная вкладка, подсвеченная ошибка.

Атрибут

После двоеточия пишут имя атрибута. Сокращённая запись — просто двоеточие перед именем:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ id: 7 }">
  <a x-bind:href="'/tasks/' + id">Полная запись</a>
  <a :href="'/tasks/' + id">Сокращённая запись</a>
</div>

Обе ссылки ведут на /tasks/7 — наведите на них курсор, адрес появится в углу окна. Дальше используется короткая форма.

Логические атрибуты

Атрибуты вроде disabled, checked, required либо есть, либо нет. Alpine добавляет атрибут, когда выражение истинно, и убирает, когда ложно:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ title: '' }">
  <input @input="title = $event.target.value" placeholder="Новая задача">
  <button :disabled="title === ''">Добавить</button>
</div>

Пока поле пустое, кнопка неактивна. Стоит ввести символ — она включается. $event — объект события, о нём есть отдельный урок.

Классы

Для :class удобнее всего объект: ключ — имя класса, значение — условие. Класс добавляется, когда условие истинно:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<style>
  .done { text-decoration: line-through; opacity: 0.6; }
</style>
 
<ul x-data="{
  tasks: [
    { id: 1, title: 'Купить молоко', done: true },
    { id: 2, title: 'Позвонить Олегу', done: false }
  ]
}">
  <template x-for="task in tasks" :key="task.id">
    <li class="task" :class="{ done: task.done }" @click="task.done = !task.done" x-text="task.title"></li>
  </template>
</ul>

Первая задача зачёркнута. Клик по любой строке переключает её состояние. Обычный атрибут class="task" при этом сохраняется: Alpine объединяет его с классами из :class.

Стили

:style тоже принимает объект. Имена свойств пишут в camelCase или в кавычках с дефисом:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ progress: 40 }">
  <div style="background: #ddd; height: 10px">
    <div :style="{ width: progress + '%', height: '10px', backgroundColor: 'seagreen' }"></div>
  </div>
  <button @click="progress = Math.min(progress + 20, 100)">Ещё</button>
</div>

Полоса прогресса заполнена на 40%, кнопка «Ещё» удлиняет её до 100%.

Частая ошибка

Забыть двоеточие: href="'/tasks/' + id". Без : атрибут обычный, и браузер получает строку как есть — ссылка ведёт на адрес с кавычками и плюсом. Если в значении выражение, атрибуту нужно : или x-bind:.