Vue條件渲染——v-if, v-else, v-else-if

一、v-if指令

v-if指令可以根據表達式的真假值來有條件地渲染元素。如果表達式返回true，則元素出現，否則，元素不會被渲染。v-if指令也可以和v-else配合使用來顯示不同的內容。

    
        <template>
            <div>
                <div v-if="isShow">顯示內容</div>
                <div v-else>隱藏內容</div>
            </div>
        </template>

        <script>
            export default {
                data() {
                    return {
                        isShow: true
                    }
                }
            }
        </script>
    

在上述代碼中，isShow表示顯示或隱藏元素的條件。當isShow取值為true時，顯示”顯示內容”，否則，顯示”隱藏內容”。

二、v-else指令

v-else指令在v-if指令的後面緊跟着使用。當v-if的條件不滿足時，v-else能夠根據條件渲染出對應的元素。v-else指令只能用在已經使用了v-if指令的元素之後。如果使用了v-else，則不能再使用v-else-if指令。

    
        <template>
            <div>
                <div v-if="score >= 90">優秀</div>
                <div v-else-if="score >= 80">良好</div>
                <div v-else-if="score >= 60">及格</div>
                <div v-else>不及格</div>
            </div>
        </template>

        <script>
            export default {
                data() {
                    return {
                        score: 70
                    }
                }
            }
        </script>
    

在上述代碼中，當score大於或等於90分時，v-if指令顯示”優秀”。當score不滿足v-if指令的條件時，會根據條件依次執行v-else-if指令，如果v-else-if指令的條件滿足，則渲染”良好”，否則，執行下一個v-else-if指令。如果所有的條件都不滿足，則渲染”不及格”。

三、v-else-if指令

v-else-if指令用於添加一個新的判斷條件，當第一個條件不滿足時，它會繼續判斷，直到滿足某一個條件。v-else-if指令必須與v-if或者v-else-if一起使用，而且必須放在v-if的後面。

    
        <template>
            <div>
                <div v-if="currentTab === 'Home' ">首頁內容</div>
                <div v-else-if="currentTab === 'Contact' ">聯繫我們內容</div>
                <div v-else-if="currentTab === 'About' ">關於我們內容</div>
                <div v-else>無法識別的內容</div>
            </div>
        </template>

        <script>
            export default {
                data() {
                    return {
                        currentTab: 'About'
                    }
                }
            }
        </script>
    

在上面的代碼中，當currentTab等於”Home”時，顯示”首頁內容”；當currentTab等於”Contact”時，顯示”聯繫我們內容”；當currentTab等於”About”時，顯示”關於我們內容”。如果currentTab不等於”Home”、”Contact”或”About”時，則顯示”無法識別的內容”。