如何避免vuejs在页面渲染完成之前展现vue标签

  • 发布时间:2017-09-23 19:25:30
  • 作者:myd620
  • 标签:vue,v-cloak

在使用vuejs进行前端页面的开发时,若在客户端网速过慢或执行大量渲染的情况下会出现短暂的页面中显示vue模版标签


例如:

渲染完成前:

<div>  {{title}} </div>

渲染完成后:

<div>  bytelang </div>



解决方法:

这种情况一般是将目标div设置display:none后再页面完成渲染之后再展现出来。

官方提供这类似的办法,但是更易于我们使用与建议一个规范:;


[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>


这种情况下,在vue渲染dom后会对目标div设置为可见。这样就可以避免在页面中出现大量模版标签的情况



官方文档:https://vuejs.org/v2/api/#v-cloak