cod*_*bro 2 html javascript alpine.js
我在我的项目中使用 alpine.js，我有一个与 alpine.js 配合良好的模式，我的问题是，每当你刷新页面时，它会显示一两秒钟（页面加载时）然后消失. 我不想看到它加载。有没有办法在 alpine.js 中解决这个问题？
我的代码
// Initialize data
<body x-data="{openModal: false}"
:class="openModal ? 'overflow-hidden' : 'overflow-visible'"
>
// button
<button @click="openModal = true">
Open Modal
</button>
<!-- Modal -->
<div x-show="openModal">
<!-- content -->
</div>
</body>
Mai*_*rey 11
x-斗篷是正确的答案！但为了安全起见，更多情况下，请使用 css important 规则。
<style>
[x-cloak] {
display: none !important;
}
</style>
您正在寻找x-cloak指令。
这是一个非常简单的方法，它会在 Alpine 启动时从组件中移除。
因此，在您的情况下，您可以添加以下内容style（这将隐藏具有该x-cloak属性的元素）并添加x-cloak到您的 Alpine.js 组件（在本例中为body）。
<style>
[x-cloak] { display: none }
</style>
<body x-cloak x-data="{openModal: false}"
:class="openModal ? 'overflow-hidden' : 'overflow-visible'"
>
// button
<button @click="openModal = true">
Open Modal
</button>
<!-- Modal -->
<div x-show="openModal">
<!-- content -->
</div>
</body>
| 归档时间： |
|
| 查看次数： |
1750 次 |
| 最近记录： |