v-cloak: 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
不适用v-cloak指令时,当网速太慢时可以观察到,浏览器加载时会把没有编译完成插值表达式显示出来;
<p>????{{msg}}????</p>
*...
data:{
msg:'sss'
}
...*
就会先显示 ????{{msg}}????
渲染数据完成后显示 ????sss????
效果的变化,会感受到闪烁。
解决办法:(设置不显示的样式,表达式被解析出来后,才会显示该标签)
<p v-cloak>????{{msg}}????</p>
*...
data:{
msg:'sss'
}
...*
<style>
[v-cloak] {
display: none;
}
</style>