wire:cloak

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

基本用法

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

<div wire:cloak>
    This content will be hidden until Livewire is fully loaded
</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，两个元素都将被隐藏直到初始化完成。

参考

wire:cloak

此指令没有修饰符。