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

推荐文章