wire:cloak

wire:cloak 用于在页面加载时隐藏元素，直到 Livewire 完全初始化。这有助于避免页面在 Livewire 初始化前就显示内容而导致的「未样式化内容闪烁」。

基本用法

使用 wire:cloak 时，把它加到你想在页面加载期间隐藏的任意元素上：

<div wire:cloak>
    This content will be hidden until Livewire is fully loaded
</div>

动态内容

当你不希望用户看到尚未初始化的动态内容时（例如用 wire:show 控制显示/隐藏的元素），wire:cloak 特别有用。

<div>
    <div wire:show="starred" wire:cloak>
        <!-- Yellow star icon... -->
    </div>

    <div wire:show="!starred" wire:cloak>
        <!-- Gray star icon... -->
    </div>
</div>

上例中，若没有 wire:cloak，Livewire 初始化前两个图标都会显示；加上 wire:cloak 后，两个元素都会隐藏到初始化完成。

参考

wire:cloak

该指令没有修饰符。