作者 ： 混元霹靂手 - Ziksang
三篇基礎釋出之後，收到最多的就是謝謝樓主，其次的就是錯別字有點多，這篇我肯定寫完之後讀三遍，現在已經是夜裡2點了，如果還有沒有發現大家就容忍一下，這次我將要講的是條件渲染，對於條件渲染我覺得思來思去真沒有什麼好寫的，但是既然我說過了這個是掘進史上最詳細那我就要堅持我的創作，做一個最完整的教程出來，但是如果你真的從頭到尾把這文章看下去，我相信你肯定會有收穫
接下來還是按著我們約定的來
1.本文分享 計算屬性
2.程式碼執行vue-cli 2.1版本
3.元件程式碼都在components資料夾裡
4.主程式碼邏輯都在 App.vue資料夾裡
我什麼都不要我只要
贊
v-if 條件渲染
在1.0的時候我們只有v-if v-else
但在2.0的時候多了一個v-else-if 我只能說有用的不行不行的
更多什麼專業名詞的解釋去看看官網那肯定比我這裡好，我這裡就是講一些官網沒有，甚至比官網還好的demo
先簡單的看一個demo
如果是通常思維寫法，我相信肯定是這麼寫
應用場景
因為我處在一家金融公司，理財師可以取消和申請客戶活動的參與次格，如果客戶是已經參與的那我可以取消參與，如果不是參與的我可以申請參與，正常做專案我們不可能因為邏輯稍微複雜我們分開兩個頁面做，一個做取消，一個做申請，那是一件很傻的事，如果再多一個選項你啟不是要再寫一個頁面，但是我們現在只能在頁面根據不同的判斷，只能顯示取消或者申請兩個其中之一，那就用v-if v-else
<template>
<div>
<h1 v-if="result == 'No'">申請參與</h1>
<h1 v-else>取消參與</h1>
</div>
</template>
<script>
export default {
data () {
return {
result : 'No'
}
}
}
</script>複製程式碼OK那沒有問題，如果result是no的話我們就申請參與，否則就是取消參與，這只是一個試用的例子，我們正常的場景肯定不是這樣的，不用看這個result值肯定是調取後臺結口，經過查詢返還你result這個欄位，那就是一個非同步請求，我們可以模擬一下，看看會有什麼結果，你結對意想不到
<template>
<div>
<h1 v-if="result == 'No'">申請參與</h1>
<h1 v-else>取消參與</h1>
</div>
</template>
<script>
export default {
created () {
setTimeout(()=>{
this.result = 'No'
},1000)
},
data () {
return {
result : ''
}
}
}
</script>複製程式碼我們在created生命週期裡模擬一個ajax請求，當傳送請求後，兩秒鐘後請求返回，會發生什麼結果，結果一臉蒙B，你會發現先顯示取消參與，兩秒後會再顯示申請參與，這本質上跟我們正常的判斷邏輯js一樣，if.....else......
如果if不成立直接成立else,因為2秒後result發生了變化，從新計算了v-if和v-else，
如果你的頁面中result引數是從sessionStorage取到或者是從url引數上擷取來的，ok不會有影響
這是一個坑一個大坑那怎麼辦那就輪到v-if-else出場了
<template>
<div>
<h1 v-if="result == 'No'">申請參與</h1>
<h1 v-else-if="result == 'Yes'">取消參與</h1>
</div>
</template>
<script>
export default {
created () {
setTimeout(()=>{
this.result = 'No'
},1000)
},
data () {
return {
result : ''
}
}
}
</script>複製程式碼我們拿v-else-if 再做一個判斷，在ajax不返回之前如果result不等於no或者不等於yes我則什麼都不顯示，讓初始result直接等於""，直到介面返回改變了資料，從新渲染了頁面，則會顯示申請參與，不會像上面造成那種一閃的效果
v-if and v-for template
1.因為 v-if 是一個指令，需要將它新增到一個元素上。但是如果我們想切換多個元素呢？此時我們可以把一個 template 元素當做包裝元素，並在上面使用 v-if。最終的渲染結果不會包含 template 元素。
2.v-if 與 v-for 一起使用
當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先順序。
我把以上兩種官方給的這句話我用一個demo給大家展示一下就明白了
應用場景
這個場景也是我這兩天做專案剛做到的，現在一個使用者可以每天領一份保險，保險有效期七天，時間長了，他就有會很多保單，有生效的保單和過期的保單，所有保單還有保單詳情，產品經理要我把過期的保單隻顯示一個保單號，沒過期的保單所有詳情全顯示出來
<template>
<div>
<div v-for='(item,index) in insurance'>
<template v-if='nowTime < item.endtime'>
<p>{{item.code}}</p>
<p>{{item.name}}</p>
<p>{{item.tel}}</p>
<hr></hr>
</template>
<template v-else-if='nowTime > item.endtime'>
<p>{{item.code}}</p>
<hr></hr>
</template>
</div>
</div>
</template>
<script>
export default {
created () {
let myDate = new Date();
let year = myDate.getFullYear(); //獲取完整的年份(4位,1970-????)
let month = myDate.getMonth()+1; //獲取當前月份(0-11,0代表1月)
let day = myDate.getDate(); //獲取當前日(1-31)
if(day<10){
day = '0'+day
}
if(month<10){
month = "0"+month
}
this.nowTime=`${year}-${month}-${day}`
var insurance = [
{endtime :'2017-02-01',code : '111111111',name:'ziksang', tel:'1000000000'},
{endtime :'2017-02-03',code : '222222222',name:'ziksang2', tel:'2000000000'},
{endtime :'2017-09-10',code : '333333333',name:'ziksang3', tel:'3000000000'},
{endtime :'2999-02-01',code : '444444444',name:'ziksang4', tel:'4000000000'}
]
this.insurance = insurance
},
data () {
return {
nowTime : "",
insurance : []
}
}
}
</script>複製程式碼endtime:保單結束時間code:保單號name : 保單使用者名稱tel：保單使用者手機
我先在最外層做一個迴圈v-for,再通過根據當前時間與保單結束時間對比，如果當前時間大於保單結束日，則用v-else-if 裡面的模板，反之則用v-if裡的模板，每個模板有著自己不同的dom結構，我想大家一定恍然大悟看懂了
過了一天，我很生氣生氣，產品經理跑過來又跟我說了一個需求，他說霹靂手，我一看他叫我霹靂手我就知道他要找我麻煩了，我回了句請叫我混元霹靂手-ziksang哈哈，不出我所料，在上面的需求加了一個功能，
改動應用場景
上面的一個功能不變，如果是過期的保險不光要顯示保單號，再過期的保單上面加一個按鈕，如果使用者點選之後可以顯示詳情，再點選之後又可以收起來，只顯示保單號，我當場就說了一句話沒有vue做不到的，給我十分種 ，啪啪啪之後就改好了
這裡牽到兩個知識點，官方話語：
v-if 是“真正的”條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下， v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件不太可能改變，則使用 v-if 較好。
注意， v-show 不支援 template 語法，也不支援 v-else。
<template>
<div>
<div v-for='(item,index) in insurance'>
<template v-if='nowTime < item.endtime'>
<p>{{item.code}}</p>
<p>{{item.name}}</p>
<p>{{item.tel}}</p>
<hr></hr>
</template>
<template v-else-if='nowTime > item.endtime'>
<button @click='item.arrow = !item.arrow'>按鈕</button>
<p>{{item.code}}</p>
<p v-show='item.arrow == true'>{{item.name}}</p>
<p v-show='item.arrow == true'>{{item.tel}}<p>
<hr></hr>
</template>
</div>
</div>
</template>
<script>
export default {
created () {
let myDate = new Date();
let year = myDate.getFullYear(); //獲取完整的年份(4位,1970-????)
let month = myDate.getMonth()+1; //獲取當前月份(0-11,0代表1月)
let day = myDate.getDate(); //獲取當前日(1-31)
if(day<10){
day = '0'+day
}
if(month<10){
month = "0"+month
}
this.nowTime=`${year}-${month}-${day}`
var insurance = [
{endtime :'2017-02-01',code : '111111111',name:'ziksang', tel:'1000000000',arrow:false},
{endtime :'2017-02-03',code : '222222222',name:'ziksang2', tel:'2000000000',arrow:false},
{endtime :'2017-09-10',code : '333333333',name:'ziksang3', tel:'3000000000',arrow:false},
{endtime :'2999-02-01',code : '444444444',name:'ziksang4', tel:'4000000000',arrow:false}
]
this.insurance = insurance
},
data () {
return {
nowTime : "",
insurance : []
}
}
}
</script>複製程式碼1.這裡我再每份保單里加了一個欄位為arrow作為按鈕開關
2.因為過期保單裡的詳情是使用者雖時會切換顯示的，所以我們用到v-show,減少dom來回去除的開銷。很神奇吧，一個demo就把條件渲染講的明明白白，透透徹徹。
我看我分享的這段時間裡，有些同學都覺得我分享的東西很基礎，基礎的才是萬變不離其中的東西，下篇我將給大家分享點複雜點的東西，我自己寫的vue日曆元件，支援介面最大時間，小最時間，起始時間，區間段不讓選時間，盡請期待。
渣渣前端開發工程師，喜歡鑽研，熱愛分享和講解教學， 微信 zzx1994428 QQ494755899
支援我繼續創作和感到有收穫的話，請向我打賞點吧
如果轉載請標註出自@混元霹靂手ziksang