通过v-show指令判断数组长度来控制元素显示隐藏，ajax数据还没取回来的时候造成页面闪烁

Question

需求：列表如果没有数据会显示一个提示为空的图片和一行文字，数据通过ajax取回来的时候，显示列表。<--------------------------------------------------------->出现问题：vue中取数据是异步的，数组中的数据还没有取回来的时候，class为empty这个div会显示出来，页面会先显示这个empty的div而后才显示列表数据，造成页面会闪烁。HTML代码：data数据：ajax取数据

Answer 1

v-cloak

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

[v-cloak] {

  display: none;

}

<div v-cloak>

  {{ message }}

</div>

不会显示，直到编译结束。