可以使用 v-cloak 指令設置樣式,這些樣式會在 Vue 實例編譯結束時,從綁定的 HTML 元素上被移除。
當網絡較慢,網頁還在加載 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 指令是解決屏幕閃動的好方法。但在大型、工程化的項目中(webpack、vue-router)只有一個空的 div 元素,元素中的內容是通過路由掛載來實現的。