使用多个 v-if 的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。例如:

<transition>
  <button v-if="docState === 'saved'" key="saved">
    Edit  </button>
  <button v-if="docState === 'edited'" key="edited">
    Save  </button>
  <button v-if="docState === 'editing'" key="editing">
    Cancel  </button></transition>

可以重写为:

<transition>
  <button v-bind:key="docState">
    {{ buttonMessage }}  </button></transition>// ...
computed: {
  buttonMessage: function () {
    switch (this.docState) {
      case 'saved': return 'Edit'
      case 'edited': return 'Save'
      case 'editing': return 'Cancel'
    }
  }
}