VUE-v-cloak

 
<style>
  [v-cloak]{
    display: none;
  }
</style>
 
<body>
  <div id="app">
  <h1 v-cloak>{{ msg }}</h1>
</div>
 
过程:
1 通过 CSS样式将 带有 v-cloak 属性的元素隐藏
2 这样,我们就无法看到 {{}} 了
3 等到vue解析完毕,会将页面中带有 v-cloak 的元素移除这个属性
4 那么,dispaly:none 的样式就失效,此时,就展示了元素
5 展示元素的时候, 插值表达式{{}} 已经被解析为对应的数据了
因此,就解决闪烁的问题了~
posted @ 2018-08-26 16:07  cecelingmeng  阅读(144)  评论(0编辑  收藏  举报