vue.js - Vue：在 v-if/else 中使用 Vue 转换？

Question

我的组件结构如下：

   <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 - 它只是让我感觉更干净。

Answer 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>

Answer 2

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

实际上你不需要调用this模板 html。

v-if="this.showData"

可以是这样的：

v-if="showData"