溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了如何解決vue數據渲染出現閃爍的問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
在使用vue進行數據渲染的時候發現當我不停的按F5刷新的時候出現了{{message}}的情況。經過多方查找我知道了要解決這個問題需要添加v-cloak指令，這時有一個問題困擾了我很久，我明明按照大家所說的加了v-for為什么還是沒有用。后來折騰了很久才發現原因，先不說為什么，看看代碼來：
在html中：
<ul v-for="item in person">
<li v-cloak>{{item.name}}</li>
</ul>在CSS中:
[v-cloak]:{diapsly:none;}在script中：
var vm = new Vue({
el:'#myapp',
date:{
person:[
{name:'zhangsan'},
{name:'lisi'},
{name:'wangwu'}
]
}
})最開始是沒有css樣式，當我發現我不斷的刷新的時候頁面上會出現{{item.name}}一閃而逝,這時我在li上面添加了v-cloak指令，并添加了css樣式。此時，我發現還是會有閃爍，我發現他根本沒有執行css的樣式。
現在大家應該都猜到原因了吧，因為我是在for循環里面添加的v-cloak。之前查的資料是直接使用。
css:
[v-cloak]:{display:none}html:
<div v-cloak>{{message}}</div>看到別人的寫法以后我就以為是直接在要渲染的該標簽添加指令，這也導致了我的v-cloak一直沒有起到作用。最后，我把v-cloak添加到了v-for上，一切終于變得正常了。
<ul v-for="item in person" v-cloak>
<li >{{item.name}}</li>
</ul>感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何解決vue數據渲染出現閃爍的問題”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
