wire:cloak

wire:cloak 是一个指令，在页面加载时隐藏元素，直到 Livewire 完全初始化。这对于防止在 Livewire 有机会初始化之前页面加载时可能发生的"未样式化内容的闪烁"很有用。

基本用法

要使用 wire:cloak，请将指令添加到你想在页面加载期间隐藏的任何元素：

<div wire:cloak>
    此内容将被隐藏，直到 Livewire 完全加载
</div>

动态内容

wire:cloak 在你希望防止用户看到未初始化的动态内容（例如使用 wire:show 显示或隐藏的元素）的场景中特别有用。

<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，两个元素都将被隐藏，直到初始化完成。