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

Question

您是否可以在vuejs条件transition和v-if之间使用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
}

在这种情况下，我似乎无法获得transition的支持，在这种情况下，当您切换show时，<p>元素在它们之间使用了transition

https://jsfiddle.net/fbponh78

Answer 1

您的问题是由以下事实引起的：vue过渡看不到元素更改，而只看到内容更改。

这是由于两个元素具有相同的标签名称，所以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://unpkg.com/vue/dist/vue.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>

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/