Vue:将Vue转换与v-if/else一起使用？

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>

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

v-if="this.showData"

可以是这样的：

v-if="showData"