vuejs 3 v-if 和 v-else答案

【问题标题】：vuejs 3 v-if and v-elsevuejs 3 v-if 和 v-else
【发布时间】：2021-11-25 12:03:07
【问题描述】：

嘿，我正在使用 vuejs 3 构建一个 spa 应用程序，但我遇到了 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，如下所示

 <CustomComponent v-if="this.IsScroll"/>
 <SecondCustomComponent v-else/>

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

【问题讨论】：

toggleIsScroll 点击事件有什么作用？

标签： html vue.js conditional-statements

【解决方案1】：

假设数据中设置了IsScroll，则不需要this。如果您需要经常切换某些东西，请使用v-show，如果条件不太可能在运行时改变，请使用v-if。

data: {
    IsScroll: true
},
methods:{
toggleIsScroll(){
.....
}
}

<div v-if="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>

【讨论】：

【解决方案2】：

v-if 和 v-else 应该与元素内的子元素一起使用。你也不需要做 v-if="this.isScroll" 而只是 v-if="isScroll"。

【讨论】：

【解决方案3】：

在有条件地显示组件时，最好使用v-show，因为每次隐藏/显示时它都不会重新渲染

<CustomComponent v-show="this.IsScroll"/>
<SecondCustomComponent v-show="!this.IsScroll"/>

【讨论】：