小編給大家分享一下vuejs中v-if和v-show的區(qū)別有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司是一家專業(yè)從事網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計(jì)公司,作為專業(yè)的成都網(wǎng)站建設(shè)公司,成都創(chuàng)新互聯(lián)公司依托強(qiáng)大的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營(yíng)經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開發(fā)服務(wù)！

1.官網(wǎng)概念描述

v-if 是'真正的'條件渲染,因?yàn)樗鼤?huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N毀和重建.

v-if 也是惰性的,如果在初始渲染時(shí)條件為假,那么什么都不做- - 直到條件第一次為真的時(shí)候才會(huì)開始渲染條件塊,相比之下,v-show就簡(jiǎn)單得多- - 不管初始條件是什么,元素總會(huì)被渲染,并且只是簡(jiǎn)單的基于css進(jìn)行切換.

一般來(lái)說(shuō),v-if 有更高的切換開銷,而 v-show 有更高的出事渲染開銷.因此,如果需要非常頻繁的切換,那么使用v-show好一點(diǎn);如果在運(yùn)行時(shí)條件不太可能改變,則使用v-if 好點(diǎn).

2.實(shí)踐結(jié)果

摘錄: 如果用v-if的話，整個(gè)dom結(jié)構(gòu)壓根就不會(huì)出現(xiàn)在頁(yè)面上，如果是用v-show的話，要視后面的條件來(lái)定，如果是true,則顯示，如果為false,則加上style=”display:none”. 所以呢，如果是組件之類的大塊頭，個(gè)人覺(jué)得用v-if更好一些，如果是一些暫時(shí)性隱藏，一會(huì)要顯示的,還是v-show更方便。對(duì)于v-style和v-show來(lái)比較，v-show相當(dāng)于是v-style=”display:none”和v-style=”display:block”的快捷方式。

1. v-show不起作用問(wèn)題

最近在用vue_element-ui開發(fā)多頁(yè)面應(yīng)用,其中遇到v-show不起作用問(wèn)題.

a.問(wèn)題描述,如下圖(預(yù)想達(dá)到的效果),其中表格數(shù)據(jù)是動(dòng)態(tài)變化的,包括標(biāo)題也會(huì)根據(jù)后臺(tái)數(shù)據(jù)發(fā)生改變,如果后臺(tái)返回的標(biāo)題為空,那么就不顯示該列的內(nèi)容.反之則顯示該列的所有數(shù)據(jù).

部分代碼如下:

執(zhí)行上圖出現(xiàn)的效果圖如下:

那么就會(huì)出現(xiàn)上圖的效果,也就是v-show沒(méi)能隱藏標(biāo)題值為null的那列數(shù)據(jù)

b.解決方法:

將v-show改為v-if即可實(shí)現(xiàn)圖一中的效果.

c.總結(jié)(個(gè)人見(jiàn)解):

由于el-table-column會(huì)生成多行標(biāo)簽元素,根據(jù)v-show是不支持template語(yǔ)法的,推斷出v-show不能顯示隱藏多個(gè)元素?不知是否

可以這樣理解,望大神告知!所以這種情況下只能用v-if來(lái)實(shí)現(xiàn).

另外補(bǔ)充,在渲染多個(gè)元素時(shí)候可以把一個(gè)