Vue 3中v-if与v-else未按预期生效问题咨询

开发者阿泽

2026-10-1

核心结论

v-if绑定元素的内部子元素完全不会影响同级v-else的生效规则。v-if和v-else的匹配仅要求两个元素是直接相邻的同级节点，和元素内部的嵌套结构没有任何关系。

问题原因及修复方案

1. 初始模板代码的问题

你的原始代码存在两个明显的语法问题：

模板内访问变量不需要加this前缀：Vue3模板会自动从组件上下文查找变量，加this反而会导致取值异常，如果你用的是<script setup>语法，this根本不指向当前组件实例，会直接取不到isScroll的值，导致条件判断永远为假。
重复的ref命名：两个分支下的ref="icon"和ref="spinner"命名重复，同一个ref名在单个组件内多次使用时，只会保留最后一个匹配的元素引用，后续操作ref会出现意料之外的问题，建议给不同分支的ref设置不同名称。

2. 封装组件后两个组件同时渲染的问题

你封装组件的代码中，判断条件写成了this.IsScroll，和原始代码的this.isScroll首字母大小写不一致。Vue的变量命名是大小写敏感的，如果你定义的响应式变量是小驼峰isScroll，大写开头的IsScroll属于未定义变量，会直接导致条件判断异常。同时这里也存在不需要加this前缀的问题。

除此之外你还可以排查以下两点：

确认isScroll是响应式变量：如果你是用普通变量声明（比如let isScroll = false）而非const isScroll = ref(false)，变量更新时Vue不会触发视图重渲染，分支判断自然不会生效。
确认两个组件之间没有其他节点插入：v-else要求必须紧跟对应的v-if节点，中间不能有注释、文本节点或者其他DOM元素，否则v-else会找不到对应的v-if，导致两个分支同时渲染。

修复后的代码示例

原生元素写法

<div v-if="isScroll" @click="toggleIsScroll" class="spinner-container"> 
  <i ref="pauseIcon" class="bi bi-pause-fill icon"></i>
  <div ref="activeSpinner" class="spinner-border text-dark loader"></div>               
</div>
<div v-else @click="toggleIsScroll" class="spinner-container"> 
  <i ref="playIcon" class="bi bi-play-fill icon"></i>
  <div ref="hiddenSpinner" class="spinner-border text-dark loader visually-hidden"></div> 
</div>

自定义组件写法

<CustomComponent v-if="isScroll"/>
<SecondCustomComponent v-else/>