vue 页面闪烁的问题_Vue使用v-show导致页面闪烁的问题

当网速较慢时，网页来不及渲染，这时就会显示差值，体验不是很好，我们可以使用v-cloak指令来解决，这一问题，并提升用户体验。（适用小项目，大型项目也一般用不到。哈哈哈哈）

html:

<div id="app">
    <h3>{{msg}}</h3>
</div>

js:

<script>
   var app = new Vue({
      el:"#app",
      data(){
          return {
               msg:'网不好，我就开始皮'
          }
      }
   })
</script>

这个时候，如果你的网络不好，页面就会出现双大括号。

解决：

html:

<div id="app"  v-cloak>
    <h3>{{msg}}</h3>
</div>

js我们不变

css:

[v-cloak]{
 display:none;
}

但是有时候添加完成，问题还是没有解决（还是显示大括号与变量），这个时候我们可以把样式的优先级做一个调整，因为有的时候display可能会被一些优先级高的覆盖掉。

[v-cloak]{
    display:none !important;
}

完美解决。