VUE還沒生效，頁面閃屏的問題解決辦法 v-cloak

當網絡較慢，網頁還在加載 Vue.js ，而導致 Vue 來不及渲染，這時頁面就會顯示出 Vue 源代碼。我們可以使用 v-cloak 指令來解決這一問題。

html：

 

<div id="app">
    {{context}}
</div>

js：

 

<script>
    var app = new Vue({
        el: '#app',
        data: {
            context:'互聯網頭部玩家鍾愛的健身項目'
        }
    });
</script>

效果：

 

我們使用 v-cloak 指令來解決屏幕閃動的問題吧O(∩_∩)O~

js 不變，在 div 中加入 v-cloak 指令。

html：

 

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

css：

 

[v-cloak]{
    display: none;
}

使用 v-cloak 指令之後的效果（demo）：

 

---

在簡單項目中，使用 v-cloak 指令是解決屏幕閃動的好方法。

作者：deniro
鏈接：https://www.jianshu.com/p/f56cde007210
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。