如何防止Vue.js隐藏元素在页面加载时弹出？

我是Vue.js的新手，我有一个（block）元素，最初应该在页面加载时隐藏。我来自一个纯JS混合了JQuery背景，所以通常我会在元素上设置

display:none

，使用JQuery的show/hide方法等

我使用Vue可以正确显示和隐藏元素，但一个副作用是，页面加载时元素会在屏幕上短暂闪烁，直到Vue设置完成，并且它知道要隐藏元素。设置

display:none

可能会中断显示/隐藏，因为elements类属性具有更高的优先级。设置

opacity:0

似乎也会覆盖Vue正在执行的任何操作，从而破坏显示/隐藏<代码>！重要信息对Vue动画类也没有帮助

下面的嵌入式沙盒可能不是重现这种情况的最佳方式，我想它也可能依赖于系统（速度、内存等），但这肯定是一种常见的情况，我错过了一些解决方案

VUE=新的VUE({
el:“#应用程序”，
数据：{
showFullpageSpinner:false
}
});
setTimeout（函数（）{
VUE.showFullpageSpinner=true；
setTimeout（函数（）{VUE.showFullpageSpinner=false；}，1500）；
}, 1500);
.fullpage微调器参考底图{
位置：固定；
宽度：100%；
身高：100%；
左：0；
排名：0；
背景：rgba（0,0,0,0.65）；
z指数：9999；
}
.fullpageSpinner进入活动状态，.fullpageSpinner离开活动状态{
过渡：不透明度.25s；
}
.fullpageSpinner输入，.fullpageSpinner离开到{
不透明度：0；
} 
.css微调器{
位置：绝对位置；
显示：内联块；
}
.css微调器：之前{
内容：“加载…”；
位置：绝对位置；
}
.css微调器：不（：必需）：在{
内容：''；
边界半径：50%；
边框顶部：3px实心#daac35；
右边框：3px实心透明；
动画：微调器。7s线性无限；
-webkit动画：微调器.7s线性无限；
}
@关键帧微调器{
到{-ms变换：旋转（360度）；}
到{变换：旋转（360度）；}
}
@-webkit关键帧微调器{
到{-webkit变换：旋转（360度）；}
到{变换：旋转（360度）；}
}
@-moz关键帧微调器{
到{moz变换：旋转（360度）；}
到{变换：旋转（360度）；}
}
.整页加载微调器{
左：50%；
最高：45%；
左边距：-40px；
利润上限：-55px；
}
.整页加载微调器：之前{
宽度：55px；
高度：55px；
}
您的问题似乎可以通过该指令解决

此指令将保留在元素上，直到关联的Vue实例完成编译。与CSS规则（如
[v-clope]{display:none}
）相结合，此指令可用于隐藏未编译的胡须绑定，直到Vue实例就绪

例如：

[v-clope]{
显示：无；
}


have
showFullpageSpinner=true
默认设置？@A.Lau，但我不希望最初显示它。这就是问题所在，应该将其隐藏起来，直到页面上出现响应某个事件的事件。问题是当页面加载时，它在屏幕上短暂闪烁<代码>显示：在
上无
。fullpage微调器参考底图

通常会修复此问题，但这样做会破坏Vue的显示/隐藏