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>

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

v-if="this.showData"

可以这样：

v-if="showData"

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

Vue: Using Vue Transitions with v-if/else?

vue.js

vuejs2

vue-transitions