您好,登錄后才能下訂單哦!
在頁面層次結構,數(shù)據(jù)較多的時候,用v-if或者v-show就會出現(xiàn)div閃現(xiàn),或者部分閃爍的結果。
可以在根元素添加v-cloak來解決,并且設置它的樣式即可。
代碼只是示例,還需要自己修改測試。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 在引入的css文件中寫入這個*/ [v-cloak] { display: none; } </style> </head> <body> <!-- 添加這個v-cloak --> <div id='app' v-cloak> <div v-if="isShow"> content </div> </div> </body> </html> <script> new Vue( { el: '#app', data () { return { isShow: false } } }) </script>
下面看下vue中v-if和v-show的區(qū)別
相同點
兩者都是在判斷DOM節(jié)點是否要顯示。
不同點
1、實現(xiàn)方式
v-if是根據(jù)后面數(shù)據(jù)的真假值判斷直接從Dom樹上刪除或重建元素節(jié)點
v-show只是在修改元素的css樣式,也就是display的屬性值,元素始終在Dom樹上。123
2、編譯過程
v-if切換有一個局部編譯/卸載的過程,切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件;
v-show只是簡單的基于css切換;123
3、編譯條件
v-if是惰性的,如果初始條件為假,則什么也不做;只有在條件第一次變?yōu)檎鏁r才開始局部編譯;
v-show是在任何條件下(首次條件是否為真)都被編譯,然后被緩存,而且DOM元素始終被保留; 123
4、性能消耗
v-if有更高的切換消耗,不適合做頻繁的切換;
v-show有更高的初始渲染消耗,適合做頻繁的額切換;
總結
以上所述是小編給大家介紹的vue使用v-if v-show頁面閃爍,div閃現(xiàn)的解決方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。