vue初始化页面闪动问题
这是因为在vue初始化之前，由于div不归vue管，所以我们写的代码在还没有解析的情况下，容易出现花屏的现象，类似于{{message}}的字样，虽然这个时间很短暂，但是需要解决。首先：css中添加[v-cloak] {display: none;}如果没有彻底解决，需要在根元素上加：这里默认vue实例绑定到类名为app的div上。<div class="app" style="displa
·
这是因为在vue初始化之前，由于div不归vue管，所以我们写的代码在还没有解析的情况下，容易出现花屏的现象，类似于{{message}}的字样，虽然这个时间很短暂，但是需要解决。
首先：
css中添加 v-cloak 这是官方文档 https://cn.vuejs.org/v2/api/#v-cloak
[v-cloak] {
display: none;
}
<div v-cloak>{{message}}</div>如果没有彻底解决，需要在根元素上加：这里默认vue实例绑定到类名为app的div上。
<div class="app" style="display: none;" :style="{display: 'block'}">
{{message}}
</div>这样应该就可以了。
原理：
vue在渲染之前，style="display: none;"让页面不显示
vue渲染完成了，:style="display: block;"让页面显示
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献8条内容
所有评论(0)