溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue怎么解決數據加載時插值表達式閃爍的問題，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
[v-cloak] {
display: none !important;
}<div class="#app" v-cloak>
<p>{undefined{value.name}}</p>
</div>在使用Vue的時候，經常會用到插值表達式，也就是兩個大括號{{}}的語法，但是有時候會出現如下問題
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app">{{mes}}</div> <script> var app = new Vue({ el:'#app', data(){ return{ mes:'helloworld' } } }) </script> </body> </html>
瀏覽器瘋狂刷新，在某一瞬間的是內容是這樣的，然后才會顯示為helloworld，會有一個閃動的問題，這其實是因為，如果單純的 <div id="app">{{mes}}</div>一句話，瀏覽器是解析不出來的，而Vue它自己的語法中是去將頁面的{{mes}}給解析出來，呈現出來在瀏覽器中，但在解析這期間是需要時間的，如果電腦運行速度慢，這就會越發的明顯，如某貴校的電費充值頁面
為了解決這種不友好的問題，Vue官方其實給出了辦法的，使用v-cloak指令
原理就是讓為編譯的給事先隱藏，上面的[v-cloak]指的是屬性選擇器。
看完上述內容，你們掌握vue怎么解決數據加載時插值表達式閃爍的問題的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
