当网络加载慢时,vue.js还没有加载完成,如果页面上使用了插值表达式,此时,vue的源码就会直接在页面上显示。
只有当vue.js加载完成后,才会显示插入的内容。
解决方法: 使用v-cloak指令来解决闪烁问题,这个指令会保存在 元素上 直到关联实例编译结束,结合css样式在内容没有加载出来时将标签隐藏。
[v-cloak]{
display: none;
}
<div v-cloak>{
{
msg }}</div>
v-cloak、v-text、v-html区别:
- v-text 没有闪烁问题,会替换标签元素中的原本内容;插值表达式只会替换占位符的内容,{ { }}中的内容
- v-text将得到的内容当作文本解析,而v-html将得到的内容当作html解析