vue使用v-if v-show頁面閃爍，div閃現的解決方法
阿新 • • 發佈：2019-03-06
數據綁定 常用 第一次 元素 編譯 事件監聽器 提示 scrip 開發
可以在根元素添加v-cloak來解決，並且設置它的樣式即可。
v-if和v-show可能是日常開發中最常用的兩個指令，雖然看上去兩者功能是類似的，但是兩者還是存在很大區別的。
v-if與v-show區別：
在切換 v-if 塊時，Vue.js 有一個局部編譯/卸載過程，因為 v-if 之中的模板也可能包括數據綁定或子組件。v-if 是真實的條件渲染，因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件監聽器和子組件。
v-if 也是惰性的：如果在初始渲染時條件為假，則什麽也不做——在條件第一次變為真時才開始局部編譯（編譯會被緩存起來）。
相比之下，v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。
簡單來說二者最大的區別是v-if只會在滿足條件時才會編譯，而v-show不管是否滿足條件始終會編譯，v-show的顯示與隱藏只是簡單的切換CSS的display屬性。
適用場景：
明白了二者的本質區別後什麽時候適合用v-if什麽時候用v-show也變得簡單了。
一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變 v-if 較好。
比如說現在很多頁面在不同端表現是不同的，最常見的是很多的APP頁面在微信端打開時頁面上會顯示下載的提示，而在APP內部則不會，像這樣的情況每個端的狀態在加載時就是確定的不會變的就適合用v-if，這樣在APP內打開時顯示下載的部分直接就不會編譯。
而像頁面上元素根據不同條件顯示/隱藏這樣的地方用v-show是最合適的了，因為像這種基本上兩個狀態要頻繁切換，如上面所說，v-show的切換消耗是小於v-if的。
可以在根元素添加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頁面閃爍，div閃現的解決方法