x-if

x-if 用于在页面上切换元素，与 x-show 类似，但不同的是它会完全添加和移除应用了该指令的元素，而不仅仅是将其 CSS display 属性改为 "none"。

由于这种行为的差异，x-if 不应直接应用于元素本身，而应应用于包裹该元素的 <template> 标签。这样，Alpine 可以在元素从页面移除后保留其记录。

<template x-if="open">
    <div>Contents...</div>
</template>

尽管上面这段代码中没有包含，但 x-if 不能在没有父元素定义 x-data 的情况下使用。→ 阅读更多关于 x-data

注意事项

与 x-show 不同，x-if 不支持使用 x-transition 进行切换过渡。

<template> 标签只能包含一个根元素。