Vue.js - 条件之间的转换（v-if 和 v-else）

Question

有没有一种方法可以在 vuejs 条件 v-if 和 transition v-else ？

举个例子：

 <transition name="fade">
    <p v-if="show">hello</p>
    <p v-else>Goodbye</p>
</transition>

---

 new Vue({
   el: '#demo',
   data: {
       show: true
   }
})

---

 .fade-enter-active,
.fade-leave-active {
    transition: opacity .5s
 }

.fade-enter,
.fade-leave-active {
    opacity: 0
}

I can’t seem to get a transition to work in such a scenario, where, as you toggle show , the <p> elements use a transition 他们之间。

https://jsfiddle.net/fbponh78

原文由 MonkeyOnARock 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你的问题是因为vue transition看不到元素的变化，它只看到内容的变化。

这是因为两个元素有相同的标签名，所以 vue 只是重用了这个。为了解决这个问题，给两个元素一个不同的键值：

 <p key=1 v-if="show">hello</p>
<p key=2 v-else>Goodbye</p>

例子：

 new Vue({
    el: '#demo',
    data: {
        show: true
    }
});

 .fade-enter-active,
.fade-leave-active {
    transition: opacity .5s
}

.fade-enter,
.fade-leave-to {
    opacity: 0
}

 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

<div id="demo">
    <button v-on:click="show = !show">
        Toggle
    </button>
    <transition name="fade">
        <p key=1 v-if="show">hello</p>
        <p key=2 v-else>Goodbye</p>
    </transition>
</div>

原文由 Ferrybig 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用两个过渡：

 new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

 .fade-enter-active {
  transition: opacity .5s
}

.fade-enter,
.fade-leave-active {
  opacity: 0
}

 <script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
  <transition name="fade">
    <p v-if="!show">Goodbye</p>
  </transition>
</div>

https://jsfiddle.net/saeedahmadi/fbponh78/10/

原文由 Saeed 发布，翻译遵循 CC BY-SA 4.0 许可协议