Vue：在 v-if/else 中使用 Vue 转换？答案

【问题标题】：Vue: Using Vue Transitions with v-if/else?Vue：在 v-if/else 中使用 Vue 转换？
【发布时间】：2020-07-30 03:11:28
【问题描述】：

我的组件结构如下：

   <component-1 
       v-if="this.showData"
    ></component-1>
    
    <component-2
       v-else
    ></compoment-2>

我想围绕每一个过渡。我唯一的选择是明确删除v-else 并检查"v-if="!this.showData"，例如：

   <transition name="fade>
      <component-1 
          v-if="this.showData"
       ></component-1>
   </transition>
    
   <transition name="fade>
      <component-2 
          v-if="!this.showData"
       ></component-1>
   </transition>

或者有没有其他方法可以让我保留我的 v-if/else - 它只是让我感觉更干净。

【问题讨论】：

标签： vue.js vuejs2 vue-transitions

【解决方案1】：

您可以在过渡组件上创建 if/else

<transition name="fade" v-if="this.showData">
  <component-1></component-1>
</transition>
    
<transition name="fade" v-else>
  <component-2></component-1>
</transition>

或在过渡下移动您的组件

<transition name="fade">
  <component-1 v-if="this.showData"></component-1>
  <component-2 v-else></component-1>
</transition>

【讨论】：

如果转换申请相同的标签名称，不要忘记使用关键属性。参考：Vue 2 Transition not working

【解决方案2】：

<transition name="fade">
  <component-1 v-if="this.showData" />
  <component-2 v-else />
</transition>

其实你不需要在模板html中调用this。

v-if="this.showData"

可以是这样的：

v-if="showData"

【讨论】：

模板中根本不需要this？
是的。我从未在 vue doc 的模板中找到 this。