使用插值表达式出现闪烁的效果

  • 使用 插值表达式 时,有一个问题:就是当网速很慢时,当vue.js还没有加载出来的时候,中间的插值表达式就会在页面上显示,当vue.js加载完之后才会显示插入的内容,出现闪烁的效果(在Chrome浏览器开发者工具中的Network修改Online为slow 3G,可以模拟网速很慢的效果)
  • 解决方法:使用v-cloak解决,这个指令会保存在 元素上 直到关联实例编译结束。v-cloak指令(属性)是在要插入的内容加载完之后就会被从标签上移除,结合CSS样式 可以设置 当内容没有加载出来时标签是隐藏的
[v-cloak] { /* []是属性选择器 */
	display: none; /* 设置当元素中有这个 属性的时候 元素是隐藏的,当要显示的内容加载完毕之后,这个指令,也是一个属性,就会被移除 */
}
<div v-cloak>{{ message }}</div>

你可能感兴趣的:(Vue)