x-text и x-html

Чтобы показать данные компонента, их нужно вывести в элемент. Директива x-text записывает значение выражения в текст элемента, а x-html — в его HTML-разметку. Обе обновляют элемент, как только меняются данные.

x-text

Значение x-text — любое выражение JavaScript. Результат становится содержимым элемента, как при записи в textContent:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ task: 'Купить молоко' }">
  <p x-text="task"></p>
</div>

В абзаце появляется «Купить молоко». Если внутри <p> был другой текст, Alpine его заменит.

Выражения

В x-text можно считать, склеивать строки, вызывать методы и использовать тернарный оператор:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ tasks: ['Купить молоко', 'Позвонить Олегу'], done: 1 }">
  <p x-text="`Выполнено ${done} из ${tasks.length}`"></p>
  <p x-text="tasks[0].toUpperCase()"></p>
  <p x-text="done === tasks.length ? 'Всё готово' : 'Есть дела'"></p>
</div>

На странице три строки: «Выполнено 1 из 2», «КУПИТЬ МОЛОКО» и «Есть дела». Длинную логику лучше вынести в метод или геттер компонента, чтобы разметка оставалась читаемой.

x-html

Директива x-html вставляет строку как разметку — теги в ней становятся настоящими элементами:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ note: 'Срок — <b>сегодня</b>' }">
  <p x-html="note"></p>
</div>

Слово «сегодня» выводится жирным. С x-text на странице появились бы сами символы <b>.

Что выбрать

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

Выводить через x-html текст, который ввёл пользователь. Вместе с текстом на страницу попадёт и чужой код — это уязвимость XSS, о которой шла речь в уроке «Изменение страницы» учебника:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ comment: '<img src=x onerror=console.log(1)>' }">
  <p x-text="comment"></p>
</div>

С x-text строка показана как есть и ничего не выполняется. Замените x-text на x-html — и в консоли появится 1: код из «комментария» запустился. Для данных пользователя используйте только x-text.