嘿，我正在用VueJS3构建一个水疗应用程序，但我被v-if和v-else困住了，不能按预期工作

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

医生说v-else需要紧随v-if之后，但我不知道如果v-if里面有孩子，它是否有效 我尝试在不同的组件中创建v-if部分和v-else部分，并在这些组件上使用v-if和v-else如下

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

但它只是总是呈现两个组件，所以我应该怎么做呢？ 即使v-if在v-else之前有子元素，也可以在后面的v-if元素上使用v-else吗？

顺晟科技：

当涉及到有条件地显示组件时，最好使用它，因为它不会在每次隐藏/显示时都重新呈现

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

v-if和v-else应该与元素中的子元素一起工作。此外，您不需要执行v-if=“this.isscroll”，而只需执行v-if=“isscroll”。

假设在数据中设置了IsScroll，则不需要。 如果需要经常切换某些内容，则使用。

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

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