Vue.js 重新加载页面正在刷新vue组件插槽上的内容

有什么方法可以避免页面刷新时出现这种闪烁，它是一个

模式

组件，将HTML作为

插槽

，但是当我刷新页面时，它会闪烁。我的应用程序未使用路由器，因此不完整

请看gif

这是代码

.body{
填料：2米；
文本对齐：居中；
显示：表格单元格；
垂直对齐：中间对齐；
}
.模态掩码{
位置：绝对位置；
z指数：9998；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,5）；
显示：表格；
过渡：不透明度。3s缓解；
}
.模态包装器{
显示：表格单元格；
垂直对齐：中间对齐；
}
.集装箱{
宽度：70%；
保证金：1em自动；
填充：20px 30px；
背景色：#fff；
边界半径：2px；
盒影：0 2px 8px rgba（0,0,0,33）；
过渡：全部。3秒轻松；
字体系列：Helvetica、Arial、无衬线字体；
}
.模态头h3{
边际上限：0；
颜色：#42b983；
}
.模态体{
利润率：20px0；
}
.模式默认按钮{
浮动：对；
}
/*
*以下样式将自动应用于具有
*切换其可见性时的transition=“modal”
*由Vue.js编写。
*
*通过编辑，您可以轻松地使用模式转换
*这些款式。
*/
.模态输入{
不透明度：0；
}
.调休有效{
不透明度：0；
}
.modal输入.modal容器，
.modal保持活动状态。modal容器{
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}

默认标题
接近
默认主体
默认页脚
好啊
显示模态
情态语篇
莫利斯夫妇，最不常见的是卢克图斯夫妇

莫代尔的爆米花
这将在单击时触发弹出窗口

模式中的工具提示
悬停时应该有工具提示


溢出文本以显示滚动行为
在发酵罐中发酵。我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。莫里·利奥·里索斯，圣殿之门，爱神之门的前庭

这是一个伟大的真理，是一个神圣的圣器，是一个伟大的圣器

这是一个非常重要的问题。这是一个巨大的共同目标，也是一个神圣的世界。Donec ullamcorper nulla non metus拍卖商fringilla

在发酵罐中发酵。我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。莫里·利奥·里索斯，圣殿之门，爱神之门的前庭

这是一个伟大的真理，是一个神圣的圣器，是一个伟大的圣器

这是一个非常重要的问题。这是一个巨大的共同目标，也是一个神圣的世界。Donec ullamcorper nulla non metus拍卖商fringilla

在发酵罐中发酵。我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。莫里·利奥·里索斯，圣殿之门，爱神之门的前庭

这是一个伟大的真理，是一个神圣的圣器，是一个伟大的圣器

这是一个非常重要的问题。这是一个巨大的共同目标，也是一个神圣的世界。Donec ullamcorper nulla non metus拍卖商fringilla

自定义标题
//寄存器模态分量
Vue.组件（'模态'{
模板：“#模式模板”
})
//启动应用程序
新Vue({
el:“#应用程序”，
数据：{
showModal:错误
}
})

这通常是由于vue.js需要加载，直到它能够执行您想要的操作

您基本上加载默认可见的html内容

加载html后，vue和vue将由于您的v-if或v-show语句而隐藏您的内容。确保这种情况不会发生的最简单的方法是使用v-clope指令加上一点css

如本例所示，将其置于非常高的级别

<div id="app"><!-- vue mounted at this div -->
    <div v-cloak>

        <!-- your actual code / content -->

    </div>
</div>

---

vue加载完成后，v-斗篷属性将立即删除。因此，在完成vue加载之前，所有内容都是隐藏的。这将确保您的内容不会闪烁。

谢谢，如果您可以查看添加到此内容的内容，我还有一个问题。如果您使用的是.vue组件，请确保在html中将v-斗篷添加到组件的根目录中。这一点一开始让我大吃一惊，因为我把v-斗篷放在组件内部的根元素上，而不是html本身。

[v-cloak] { display: none; }