x-if

Директива x-if не прячет элемент, а полностью добавляет его на страницу или убирает. Пока условие ложно, элемента в разметке нет вовсе. Это нужно, когда содержимое тяжёлое или не должно существовать без данных — например, блок, который обращается к свойствам выбранной задачи.

Тег template

x-if ставится только на тег <template>. Браузер не показывает содержимое <template>, а Alpine копирует его на страницу, когда условие становится истинным:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ loggedIn: false }">
  <button @click="loggedIn = !loggedIn">Войти / выйти</button>
 
  <template x-if="loggedIn">
    <p>Добро пожаловать, Анна!</p>
  </template>
</div>

Кнопка добавляет абзац и убирает его. Откройте инструменты разработчика: когда абзаца не видно, его нет и в дереве элементов, остаётся только <template>.

Когда без x-if не обойтись

Выбранная задача сначала равна null. Выражение selected.title при этом вызвало бы ошибку, и x-if её предотвращает:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ selected: null }">
  <button @click="selected = { title: 'Купить молоко', author: 'Олег' }">Выбрать задачу</button>
 
  <template x-if="selected">
    <div>
      <h3 x-text="selected.title"></h3>
      <p x-text="'Автор: ' + selected.author"></p>
    </div>
  </template>
</div>

До клика ничего не выводится и ошибок нет. После клика появляется карточка задачи. С x-show карточка существовала бы сразу, и Alpine попытался бы прочитать title у null.

x-if или x-show

Для меню, подсказок и модальных окон берите x-show. Для блоков, которым нужны данные, которых может не быть, — x-if.

Один корневой элемент

Внутри <template> должен быть ровно один элемент верхнего уровня. Несколько элементов оборачивают в <div>, как в примере с карточкой.

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

Поставить x-if прямо на <div>:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ show: false }">
  <div x-if="show">Этот текст виден всегда</div>
</div>

Текст виден, хотя show ложно. Директива работает только на <template> — оберните в него содержимое.