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;"让页面显示
更多推荐
已为社区贡献8条内容
所有评论(0)