dev-zuo 技术日常
Github

vue v-cloak指定防止页面内容显示抖动的问题

这篇文章发布于 2019/10/11,归类于
标签:
v-clockvue v-clock页面显示前vue未渲染内容一闪而过的问题vue页面显示抖动

v-clock主要用于防止由于网络原因vue.js未渲染时,页面显示类似 {{username}} 的问题,下面来看看实现

<!-- 加上 v-clock 指令-->
<div v-cloak>
  {{message/}}
</div>

记住,需要配合css来使用

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

/* 当编译完成后,v-clock属性会被自动移除。*/ 
[v-cloak] {
  display: none;
}

参考: