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

发布时间:2023-05-20

一、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"时,则显示"无法识别的内容"。