這篇文章主要為大家詳細介紹了v-if和v-show在vue.js中的作用是什么，文中示例代碼介紹的非常詳細，具有一定的參考價值，發(fā)現(xiàn)的小伙伴們可以參考一下：

創(chuàng)新互聯(lián)公司是一家專注于做網(wǎng)站、成都網(wǎng)站設(shè)計與策劃設(shè)計,金牛網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:金牛等地區(qū)。金牛做網(wǎng)站價格咨詢:18980820575

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

1.共同點

都是動態(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才開始局部編譯（編譯被緩存？編譯被緩存后，然后再切換的時候進行局部卸載); v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存，而且DOM元素保留；

（4）性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；

（5）使用場景：v-if適合運營條件不大可能改變；v-show適合頻繁切換。 

Tips：（1）如果v-show作用的元素，css文件中display:none，通過v-show進行設(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"  v-show="show">

以上就是創(chuàng)新互聯(lián)小編為大家收集整理的v-if和v-show在vue.js中的作用是什么，如何覺得創(chuàng)新互聯(lián)網(wǎng)站的內(nèi)容還不錯，歡迎將創(chuàng)新互聯(lián)網(wǎng)站推薦給身邊好友。

名稱欄目：v-if和v-show在vue.js中的作用是什么
鏈接地址：http://jinyejixie.com/article36/pdcgsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、網(wǎng)站排名、云服務(wù)器、面包屑導(dǎo)航、App開發(fā)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)