vue刷新后瞬間閃爍,無法解析的問題
更新時間：2023年11月09日 14:21:53 作者：donggua_123
這篇文章主要介紹了vue刷新后瞬間閃爍,無法解析的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue刷新瞬間閃爍,無法解析問題
在使用vue的時候?qū)懥艘欢未a
每次刷新的瞬間會無法解析，也只是一閃而已，但是體驗非常不好，查閱了資料后發(fā)現(xiàn)是由于vue編譯的時候是先渲染然后再根據(jù)v-show來條件隱藏，那樣就會出現(xiàn)看得見的一瞬間，并且顯示還在編譯之前，這就導(dǎo)致本來刷新的時候要隱藏的元素有一瞬間的顯示，而且還是未被編譯的狀態(tài)。
解決這個問題很簡單
在內(nèi)容標(biāo)簽上添加v-cloak屬性，并配合css中[c-cload]{display: none;}使用即可。
這樣就解決啦！當(dāng)然其它出現(xiàn)閃爍未編譯的情況處理方法類似。
官方給出的該屬性的解釋是：
這個指令保持在元素上直到關(guān)聯(lián)實例結(jié)束編譯。
和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實例準(zhǔn)備完畢。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Print.js一個小的javascript庫,可幫助您從網(wǎng)絡(luò)上打印,這篇文章主要給大家介紹了關(guān)于printJS打印問題匯總以及解決辦法的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
vue element-ui 綁定@keyup事件無效的解決方法
遇到vue element-ui 綁定@keyup事件無效的問題怎么解決？下面小編就為大家分享一篇vue element-ui 綁定@keyup事件無效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了Vue+Element實現(xiàn)表格單元格編輯，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了如何使用vue3實現(xiàn)一個高德地圖天氣小組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
Vue 2.0+Vue-router構(gòu)建一個簡單的單頁應(yīng)用（附源碼）
這篇文章主要給大家介紹了基于Vue 2.0+Vue-router構(gòu)建了一個簡單的單頁應(yīng)用，文中通過實例介紹的非常詳細(xì)，并在文末給出了源碼下載，需要的朋友可以下載學(xué)習(xí)參考，下面來一起看看吧。2017-03-03
Vue2為何能通過this訪問到data與methods的屬性
這篇文章主要介紹了Vue2為何能通過this訪問到data與methods的屬性，文章圍繞主題展開詳細(xì)的內(nèi)容戒殺，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
文章介紹了一個使用Vue和Element UI僅在前端實現(xiàn)增刪改功能的示例,未涉及后端知識,主要分為編輯、新增和刪除方法,并提供了全部代碼2026-03-03
這篇文章主要介紹了VUE前端實現(xiàn)token的無感刷新方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
Keep-Alive模式避免頻繁創(chuàng)建、銷毀鏈接，允許多個請求和響應(yīng)使用同一個HTTP鏈接，這篇文章主要介紹了vue2.x中keep-alive源碼解析,需要的朋友可以參考下2023-02-02
Vue-router是Vue的核心組件，主要是作為Vue的路由管理器，Vue-router默認(rèn)hash模式，本文講給大家詳細(xì)分析Vue路由Hash模式，文中有相關(guān)的代碼示例供大家參考，感興趣的同學(xué)可以借鑒一下2023-06-06