vue使用插值表达式 {{}} 页面闪烁问题,v-cloak、v-text、v-html区别

当网络加载慢时,vue.js还没有加载完成,如果页面上使用了插值表达式,此时,vue的源码就会直接在页面上显示。
只有当vue.js加载完成后,才会显示插入的内容。

解决方法: 使用v-cloak指令来解决闪烁问题,这个指令会保存在 元素上 直到关联实例编译结束,结合css样式在内容没有加载出来时将标签隐藏。

[v-cloak]{
    
    
	display: none; 
}

<div v-cloak>{
    
    {
    
     msg }}</div>

v-cloak、v-text、v-html区别:

  1. v-text 没有闪烁问题,会替换标签元素中的原本内容;插值表达式只会替换占位符的内容,{ { }}中的内容
  2. v-text将得到的内容当作文本解析,而v-html将得到的内容当作html解析

猜你喜欢

转载自blog.csdn.net/weixin_45559449/article/details/102587485