x-if

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

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

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

Осторожно

Несмотря на отсутствие в приведённом выше фрагменте, x-if не может быть использована, если ни у одного из родительских элементов не указана директива x-data

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

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

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