x-if

x-if используется для переключения видимости элементов на странице, аналогично x-show. Однако, в отличие от директивы x-show, которая просто меняет значение CSS-свойства display на «none», x-if полностью добавляет и удаляет элемент из DOM.

Из-за этой разницы в поведении x-if нельзя применять непосредственно к элементу. Вместо этого её нужно использовать с тегом <template>, который оборачивает элемент. Так Alpine сможет сохранить информацию об элементе после его удаления со страницы.

<template x-if="open">
  <div>Содержимое...</div>
</template>

Осторожно

x-if требует, чтобы хотя бы у одного из родительских элементов была указана директива x-data

Предостережения

В отличие от x-show, x-if НЕ поддерживает анимации переключения с помощью x-transition.

Тег <template> может содержать только один корневой элемент.