史上最詳細 VUE2.0 全套 demo 講解基礎4（條件渲染）

時間 2019-11-17

標籤史上詳細 vue2.0 vue 全套 demo 講解基礎條件渲染简体版

原文原文鏈接

做者：混元霹靂手 - Ziksangjavascript

三篇基礎發佈以後，收到最多的就是謝謝樓主，其次的就是錯別字有點多，這篇我確定寫完以後讀三遍，如今已是夜裏2點了，若是還有沒有發現你們就容忍一下，此次我將要講的是條件渲染，對於條件渲染我以爲思來思去真沒有什麼好寫的，可是既然我說過了這個是掘進史上最詳細那我就要堅持個人創做，作一個最完整的教程出來，可是若是你真的從頭至尾把這文章看下去，我相信你確定會有收穫前端

接下來仍是按着咱們約定的來vue

1.本文分享計算屬性

2.代碼運行vue-cli 2.1版本

3.組件代碼都在components文件夾裏

4.主代碼邏輯都在 App.vue文件夾裏

我什麼都不要我只要java

贊

v-if 條件渲染ajax

在1.0的時候咱們只有v-if v-else
但在2.0的時候多了一個v-else-if 我只能說有用的不行不行的
更多什麼專業名詞的解釋去看看官網那確定比我這裏好，我這裏就是講一些官網沒有，甚至比官網還好的demovue-cli

先簡單的看一個demo
若是是一般思惟寫法，我相信確定是這麼寫微信

應用場景
由於我處在一家金融公司，理財師能夠取消和申請客戶活動的參與次格，若是客戶是已經參與的那我能夠取消參與，若是不是參與的我能夠申請參與，正常作項目咱們不可能由於邏輯稍微複雜咱們分開兩個頁面作，一個作取消，一個作申請，那是一件很傻的事，若是再多一個選項你啓不是要再寫一個頁面，可是咱們如今只能在頁面根據不一樣的判斷，只能顯示取消或者申請兩個其中之一，那就用v-if v-elsesession

<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這個字段，那就是一個異步請求，咱們能夠模擬一下，看看會有什麼結果，你結對意想不到app

<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出場了dom

<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

支持我繼續創做和感到有收穫的話，請向我打賞點吧