深入理解vue.js中的v-if和v-show
本文主要給大家介紹了關(guān)于vue.js中v-if和v-show的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹：
1.共同點(diǎn)
都是動態(tài)顯示DOM元素
2.區(qū)別
（1）手段：v-if是動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素；v-show是通過設(shè)置DOM元素的display樣式屬性控制顯隱；
（2）編譯過程：v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件；v-show只是簡單的基于css切換；
（3）編譯條件：v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變?yōu)檎鏁r才開始局部編譯（編譯被緩存？編譯被緩存后，然后再切換的時候進(jìn)行局部卸載); v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存，而且DOM元素保留；
（4）性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；
（5）使用場景：v-if適合運(yùn)營條件不大可能改變；v-show適合頻繁切換。
Tips： （1）如果v-show作用的元素，css文件中display:none，通過v-show進(jìn)行設(shè)置不能顯示該元素；
原因：v-show控制顯隱，是通過js代碼去修改元素的element style，如果value為false，設(shè)置display: none;如果value為true，設(shè)置display: ''；于是value為true時，只能將element style中的display效果清除，并不能覆蓋css中的display效果；
如下圖所示，value=true時，v-show改變的是element.style，由于無效，顯示效果由css文件中的display決定。
解決辦法：
使用v-show的話，在vue解析之前隱藏DOM的話，盡量在style屬性里面設(shè)置display的值，不要在css文件中。 <ul v-touch:tap="message=2" style="display: none" v-show="show">
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
- VUE中的v-if與v-show區(qū)別介紹
- vue 條件渲染v-if和v-show
- Vue常用指令v-if與v-show的區(qū)別淺析
- 如何區(qū)分vue中的v-show 與 v-if
- 簡單了解vue中的v-if和v-show的區(qū)別
- vue中的v-if和v-show的區(qū)別詳解
- vue中v-show和v-if的異同及v-show用法
- vue使用v-if v-show頁面閃爍,div閃現(xiàn)的解決方法
- Vue中 v-if/v-show/插值表達(dá)式導(dǎo)致閃現(xiàn)的原因及解決辦法
- vue實現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹
- 關(guān)于vuejs中v-if和v-show的區(qū)別及v-show不起作用問題
- vue學(xué)習(xí)筆記之v-if和v-show的區(qū)別
- Vue.js使用v-show和v-if的注意事項
- Vue.js中v-show和v-if指令的用法介紹
相關(guān)文章
本篇文章主要介紹了vue中computed 和 watch的異同，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要給大家介紹了關(guān)于vue中實現(xiàn)div可編輯并插入指定元素與樣式的相關(guān)資料,文中通過代碼以及圖文將實現(xiàn)的方法介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue-router中關(guān)于meta的作用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細(xì)介紹了Vue如何利用vue-print-nb插件實現(xiàn)打印功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)一下2023-03-03
Vue-router是Vue的核心組件，主要是作為Vue的路由管理器，Vue-router默認(rèn)hash模式，本文講給大家詳細(xì)分析Vue路由Hash模式，文中有相關(guān)的代碼示例供大家參考，感興趣的同學(xué)可以借鑒一下2023-06-06
這篇文章主要為大家介紹了Vue的計算屬性，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了Vue八大生命周期鉤子函數(shù),生命周期函數(shù)，就是在某個時刻會自動執(zhí)行的函數(shù),本文帶你了解八大生命周期鉤子函數(shù),一起來看看吧2023-03-03
在后臺管理系統(tǒng)，可以根據(jù)登錄用戶的不同返回不同路由，頁面也會根據(jù)這些路由生成對應(yīng)的菜單，本文主要介紹了vue3動態(tài)路由+菜單欄的實現(xiàn)示例，感興趣的可以了解一下2024-04-04
vue3+ts項目中.env配置環(huán)境變量與情景配置方式
本文介紹了如何在Vite中配置環(huán)境變量和不同的運(yùn)行模式,環(huán)境變量文件以.env開頭,僅VITE_前綴的變量會被暴露,開發(fā)模式加載.env.development,生產(chǎn)模式加載.env.production,NODE_ENV用于區(qū)分開發(fā)和生產(chǎn)環(huán)境2024-10-10
Vue.js目前已經(jīng)更新到2.x，功能和語法上有一定升級和修改，本文首先介紹基礎(chǔ)內(nèi)容。感興趣的朋友一起看看吧2017-10-10