【vue】v-if、v-else-if、v-else：控制组件之间的显示切换

最新推荐文章于 2025-06-22 21:27:20 发布

原创最新推荐文章于 2025-06-22 21:27:20 发布 · 681 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

前端专栏专栏收录该内容

10 篇文章

订阅专栏

本文介绍了Vue.js中v-if、v-else-if和v-else的使用方法，通过实例展示了如何根据left和right变量的布尔值动态显示不同内容。适合理解条件渲染在前端开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、解析

v-if：参数值=ture时才显示
v-else-if：参数值=true时才显示；若v-if 和 v-else-if 的参数值均等于true，显示v-if 对应的元素。
v-else：v-if、v-else-if 参数值均=false时，才显示

二、用法

<div v-if="参数1"></div>
<div v-else-if="参数2"></div>
<div v-else></div>

三、功能实现

left为true，显示：v-if="left" div的内容
left为false，若right为true时，显示：v-else-if="right" div的内容；若right为false，显示：v-else div的内容。

<template>
    <div>
<div v-if="left"></div>
<div v-else-if="right"></div>
<div v-else>请点击左侧set</div>
    </div>
</template>


<script>
export default {
        name: "Project_case",
        data(){
            return{
                left:false,
                right:false
                   }
               }
}


</script>