Preloader v-cloak不显示文本加载

Question

我有css：

[v-cloak]::before { content: "loading…"; display: block; text-align: center; width: 300px; height: 600px; margin: 0 auto; font-size: 60px; }

页面加载时，我没有得到loading..。为什么？我得到白色背景。.我需要做预加载器v-斗篷，在用户上显示，该页面正在加载..

Answer 1

尝试使用文档中的示例：

CSS：
[v-cloak] { display: none; }

.vue：
<div v-cloak> Loading... </div>

Answer 2

插入::before伪元素作为$bookname == "fileONE-"元素的 第一个孩子 ，该元素是 隐藏的 。

解决方法是为加载指示器创建一个相邻元素，并在其中应用所需的CSS：

[v-cloak]

<div id="app" v-cloak></div>
<div id="loader"></div>

<style>
[v-cloak] + .loader::before {
  /* ... */
}
</style>

setTimeout(() => new Vue({ el: '#app' }), 1500)

[v-cloak] {
  display: none;
}

[v-cloak] + #loader::before {
  content: "loading…";
  display: block;
  text-align: center;
  width: 300px;
  height: 600px;
  margin: 0 auto;
  font-size: 60px;
}