溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“vuejs在解析時出現閃爍問題如何解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vuejs在解析時出現閃爍問題如何解決”文章能幫助大家解決問題。
原因：
在使用vuejs、angularjs開發時，經常會遇見在如Chrome這類能夠快速解析的瀏覽器上出現表達式({{ express }} ),或者是模塊(div)的閃爍。對于這個問題由于JavaScript去操作DOM，都會等待DOM加載完成（DOM ready）。對于vuejs、angularjs這些會在DOM ready完會才回去解析html view Template，所以對于Chrome這類快速的瀏覽器你會看見有閃爍的情況出現。而對于IE7，8這類解析稍慢的瀏覽器大部分情況下是不會出現這個問題的。
解決方法：
在vuejs、angularjs中為我們提供了v-cloak、ng-cloak來實現防止閃爍的方案，同時對于bing文字({{ express }} )我們也可以改為v-bind、ng-bind來實現避免。
下面以vuejs為例：
#v-cloak
用法：
這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢。
示例：
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div><div> 不會顯示，直到編譯結束。
原理：
帶有v-clock的的元素設置為display:none，隱藏掉，在等到vue解析到帶有v-clock的節點時候，會把attribute和class同時remove掉，這樣就可以實現防止節點的閃爍。
實例：
//example1:
<span>{{price}}</span>
//example2:
<span v-bind="price"></span>
//example3:
<span v-cloak>{{price}}</span>上例子2和例子3實現的效果是一樣的，而例子1在vuejs解析{{price}}之前，用戶是可以看到"{{price}}"這個字符串的。而例子2和例子3不會有這種閃爍的情況。
關于“vuejs在解析時出現閃爍問題如何解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
