Question

我正在为我的项目使用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>

Answer 1

您正在寻找x-cloak指令。

这是一个非常简单的程序，当Alpine启动时，它会从组件中删除。

因此，在您的情况下，您可以添加以下style（这将隐藏具有x-cloak属性的元素），并将x-cloak添加到您的Alpine.js组件（在这种情况下，{ {1}}。

body

Answer 2

x-cloak 是正确的答案！但为了在更多情况下安全起见，请使用 css 重要规则。

<style>
  [x-cloak] { 
      display: none !important;
   }
</style>

如何防止每次刷新页面时都显示alpine.js模式

2 个答案: