如何防止每次刷新页面时都显示alpine.js模式
如何防止每次刷新页面时都显示alpine.js模式
提问于 2020-10-19 23:28:36
我在我的项目中使用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>回答 2
Stack Overflow用户
发布于 2020-10-20 03:06:54
您正在寻找x-cloak指令。
这是一个非常简单的，它会在高山启动时从组件中删除。
因此，在本例中，您可以添加以下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>Stack Overflow用户
发布于 2021-01-08 23:50:42
x-斗篷是正确的安装服！但为了安全起见，在更多的情况下，请使用css重要规则。
<style>
[x-cloak] {
display: none !important;
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64430464
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号