Question

我设置了一个 v-bind:class 如下：

<template>
  <div
    :class="[loading ? 'loading' : 'noloading']"
    class="p-3 text-center shadow rounded bg-white w-full absolute top-14/12 left-0 z-10 dark:bg-gray-800"
    v-text="searchSuccess ? t('common.autoComplete.loading') : t('common.autoComplete.loadingFailed')"
  ></div>
</template>
<style lang="postcss" scoped>
.loading {
  @apply visible;
}
.noloading {
  @apply max-h-0;
  @apply invisible;
}
</style>

如果加载为false，它将被隐藏，并且在开发环境中可以正常工作。当我在我的服务器上构建和部署它时，它也能正常工作。

然而，当我刷新页面时，css效果消失了。如图所示，显示了类noloading，但是控制台中的样式选项卡无法捕获css代码。

enter image description here

奇怪的是，这种情况在开发环境中没有出现。它只有在我构建代码并刷新服务器上的页面后才会出现。

为什么会发生这种情况，我该如何解决？

v-bind:class 在构建和刷新后不起作用

0 个答案: