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”时，则显示”无法识别的内容”。