Vue 差值表达式的闪动问题

前言:

　　vue中的差值表达式会被经常性的使用，但是不知道有多少同学在使用会注意到了一个页面上出现闪动的问题-也就是先显示差值表达式之后再显示对应的值，这是一些细节上的问题，但是如果遇到了浏览器加载慢的问题体验很差。

方法:

　　解决的方法其实很简单，举例子来说明这个问题, 当浏览器加载比较慢的时候会先显示{{ msg }},之后才会显示Hello Vue的字样

<div id="app">
  {{ msg }}
</div>
// js
<script>
var app = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!'
  }
})
</script>

　　使用原生的v-cloak指令即可解决上述问题，直接上代码

/*
*v-cloak的原理: 编译前隐藏，编译结束直接显示
*/
<style>
    [v-cloak] {
        display: none;
    }
</style>
// html
<div id="app" v-cloak>
  {{ msg }}  // 此为插值表达式
</div>
// js
<script>
var app = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!'
  }
})
</script>

　　上述的v-cloak指令可能会运用的比较少一些，希望真的能帮助遇到了上述问题的同学。

 

谢谢客官的品尝，如有不严谨和错误地方请希望指正，祝大家工作和生活顺利 ！