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?我只能說(shuō)有用的不行不行的
更多什么專(zhuān)業(yè)名詞的解釋去看看官網(wǎng)那肯定比我這里好，我這里就是講一些官網(wǎng)沒(méi)有，甚至比官網(wǎng)還好的demo

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

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

OK那沒(méi)有問(wèn)題，如果result是no的話我們就申請(qǐng)參與，否則就是取消參與，這只是一個(gè)試用的例子，我們正常的場(chǎng)景肯定不是這樣的，不用看這個(gè)result值肯定是調(diào)取后臺(tái)結(jié)口，經(jīng)過(guò)查詢(xún)返還你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，
如果你的頁(yè)面中result參數(shù)是從sessionStorage取到或者是從url參數(shù)上截取來(lái)的，ok不會(huì)有影響
這是一個(gè)坑一個(gè)大坑那怎么辦那就輪到v-if-else出場(chǎng)了

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