这是因为在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;"让页面显示

Logo

前往低代码交流专区

更多推荐