VUE2.0 demo條件渲染講解 - 全文

1.本文分享 計(jì)算屬性
2.代碼運(yùn)行vue-cli 2.1版本
3.組件代碼都在components文件夾里
4.主代碼邏輯都在 App.vue文件夾里
v-if 條件渲染

在1.0的時(shí)候我們只有v-if v-else
但在2.0的時(shí)候多了一個(gè)v-else-if?我只能說有用的不行不行的
更多什么專業(yè)名詞的解釋去看看官網(wǎng)那肯定比我這里好，我這里就是講一些官網(wǎng)沒有，甚至比官網(wǎng)還好的demo

先簡單的看一個(gè)demo
如果是通常思維寫法，我相信肯定是這么寫

應(yīng)用場(chǎng)景
因?yàn)槲姨幵谝患医鹑?a target="_blank">公司，理財(cái)師可以取消和申請(qǐng)客戶活動(dòng)的參與次格，如果客戶是已經(jīng)參與的那我可以取消參與，如果不是參與的我可以申請(qǐng)參與，正常做項(xiàng)目我們不可能因?yàn)檫壿嬌晕?fù)雜我們分開兩個(gè)頁面做，一個(gè)做取消，一個(gè)做申請(qǐng)，那是一件很傻的事，如果再多一個(gè)選項(xiàng)你啟不是要再寫一個(gè)頁面，但是我們現(xiàn)在只能在頁面根據(jù)不同的判斷，只能顯示取消或者申請(qǐng)兩個(gè)其中之一，那就用v-if v-else

OK那沒有問題，如果result是no的話我們就申請(qǐng)參與，否則就是取消參與，這只是一個(gè)試用的例子，我們正常的場(chǎng)景肯定不是這樣的，不用看這個(gè)result值肯定是調(diào)取后臺(tái)結(jié)口，經(jīng)過查詢返還你result這個(gè)字段，那就是一個(gè)異步請(qǐng)求，我們可以模擬一下，看看會(huì)有什么結(jié)果，你結(jié)對(duì)意想不到

我們?cè)赾reated生命周期里模擬一個(gè)ajax請(qǐng)求，當(dāng)發(fā)送請(qǐng)求后，兩秒鐘后請(qǐng)求返回，會(huì)發(fā)生什么結(jié)果，結(jié)果一臉蒙B，你會(huì)發(fā)現(xiàn)先顯示取消參與，兩秒后會(huì)再顯示申請(qǐng)參與，這本質(zhì)上跟我們正常的判斷邏輯js一樣，if.....else......
如果if不成立直接成立else,因?yàn)?秒后result發(fā)生了變化，從新計(jì)算了v-if和v-else，
如果你的頁面中result參數(shù)是從sessionStorage取到或者是從url參數(shù)上截取來的，ok不會(huì)有影響
這是一個(gè)坑一個(gè)大坑那怎么辦那就輪到v-if-else出場(chǎng)了

我們拿v-else-if?再做一個(gè)判斷，在ajax不返回之前如果result不等于no或者不等于yes我則什么都不顯示，讓初始result直接等于""，直到接口返回改變了數(shù)據(jù)，從新渲染了頁面，則會(huì)顯示申請(qǐng)參與，不會(huì)像上面造成那種一閃的效果

v-if and v-for template

1.因?yàn)?v-if 是一個(gè)指令，需要將它添加到一個(gè)元素上。但是如果我們想切換多個(gè)元素呢？此時(shí)我們可以把一個(gè)?template?元素當(dāng)做包裝元素，并在上面使用 v-if。最終的渲染結(jié)果不會(huì)包含template?元素。
2.v-if 與 v-for 一起使用
當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級(jí)。
我把以上兩種官方給的這句話我用一個(gè)demo給大家展示一下就明白了

應(yīng)用場(chǎng)景
這個(gè)場(chǎng)景也是我這兩天做項(xiàng)目剛做到的，現(xiàn)在一個(gè)用戶可以每天領(lǐng)一份保險(xiǎn)，保險(xiǎn)有效期七天，時(shí)間長了，他就有會(huì)很多保單，有生效的保單和過期的保單，所有保單還有保單詳情，產(chǎn)品經(jīng)理要我把過期的保單只顯示一個(gè)保單號(hào)，沒過期的保單所有詳情全顯示出來

endtime:保單結(jié)束時(shí)間
code:保單號(hào)
name?: 保單用戶名
tel：保單用戶手機(jī)

我先在最外層做一個(gè)循環(huán)v-for,再通過根據(jù)當(dāng)前時(shí)間與保單結(jié)束時(shí)間對(duì)比，如果當(dāng)前時(shí)間大于保單結(jié)束日，則用v-else-if?里面的模板，反之則用v-if里的模板，每個(gè)模板有著自己不同的dom結(jié)構(gòu)，我想大家一定恍然大悟看懂了

改動(dòng)應(yīng)用場(chǎng)景

這里牽到兩個(gè)知識(shí)點(diǎn)，官方話語：
v-if 是“真正的”條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。
v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊。
相比之下， v-show 就簡單得多——不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡單地基于 CSS 進(jìn)行切換。
一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件不太可能改變，則使用 v-if 較好。
注意， v-show 不支持?template?語法，也不支持 v-else。

1.這里我再每份保單里加了一個(gè)字段為arrow作為按鈕開關(guān)
2.因?yàn)檫^期保單里的詳情是用戶雖時(shí)會(huì)切換顯示的，所以我們用到v-show,減少dom來回去除的開銷。很神奇吧，一個(gè)demo就把條件渲染講的明明白白，透透徹徹。