（1）手段：v-if是動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素；v-show是通過(guò)設(shè)置DOM元素的display樣式屬性控制顯隱；
（2）編譯過(guò)程：v-if切換有一個(gè)局部編譯/卸載的過(guò)程，切換過(guò)程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件；v-show只是簡(jiǎn)單的基于css切換；
（3）編譯條件：v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯（編譯被緩存？編譯被緩存后，然后再切換的時(shí)候進(jìn)行局部卸載); v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存，而且DOM元素保留；
（4）性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；
（5）使用場(chǎng)景：v-if適合運(yùn)營(yíng)條件不大可能改變；v-show適合頻繁切換。

Tips：如果v-show作用的元素，css文件中display:none，通過(guò)v-show進(jìn)行設(shè)置不能顯示該元素；

原因：v-show控制顯隱，是通過(guò)js代碼去修改元素的element style，如果value為false，設(shè)置display: none;如果value為true，設(shè)置display: ''；于是value為true時(shí)，只能將element style中的display效果清除，并不能覆蓋css中的display效果；

如下圖所示，value=true時(shí)，v-show改變的是element.style，由于無(wú)效，顯示效果由css文件中的display決定。

解決辦法：使用v-show的話，在vue解析之前隱藏DOM的話，盡量在style屬性里面設(shè)置display的值，不要在css文件中。

<ul v-touch:tap="message=2" style="display: none" v-show="show">

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解vue-amap引入高德JS API的原理
vue-amap是對(duì)高德地圖JS API進(jìn)行封裝的、適用于vue項(xiàng)目的地圖組件庫(kù)，本文主要介紹了vue-amap引入高德JS API的原理，具有一定的參考價(jià)值，感興趣的可以了解一下
2022-06-06
vue如何加載本地json數(shù)據(jù)
這篇文章主要介紹了vue如何加載本地json數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue實(shí)現(xiàn)價(jià)格日歷效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)價(jià)格日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
vue3使用vis繪制甘特圖制作timeline可拖動(dòng)時(shí)間軸及時(shí)間軸中文化(推薦)
這篇文章主要介紹了vue3使用vis繪制甘特圖制作timeline可拖動(dòng)時(shí)間軸，時(shí)間軸中文化,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-02-02
Vue 監(jiān)聽列表item渲染事件方法
今天小編就為大家分享一篇Vue 監(jiān)聽列表item渲染事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue中Mustache引擎插值語(yǔ)法使用詳解
在Vue中通過(guò)Mustache模板引擎將data中的文本數(shù)據(jù)插入到HTML中,下面這篇文章主要給大家介紹了關(guān)于Vue中Mustache模板引擎插值語(yǔ)法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
解決vue attr取不到屬性值的問題
今天小編就為大家分享一篇解決vue attr取不到屬性值的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue+Node實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選，添加購(gòu)物車功能詳解
這篇文章主要介紹了Vue+Node實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選，添加購(gòu)物車功能,結(jié)合實(shí)例形式分析了vue.js前臺(tái)商品分頁(yè)、排序、篩選等功能及后臺(tái)node.js處理技巧,需要的朋友可以參考下
2019-12-12
結(jié)合Vue控制字符和字節(jié)的顯示個(gè)數(shù)的示例
這篇文章主要介紹了結(jié)合Vue控制字符和字節(jié)的顯示個(gè)數(shù)的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
vue3 父子組件傳值詳解
這篇文章主要為大家介紹了vue的父子組件傳值，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-11-11