[Vue.js]学习笔记-Vue.js过渡&动画-多个元素的过渡 - 苏飞论坛

我们可以设置多个元素的过渡，一般列表与描述：

需要注意的是当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

[HTML] 纯文本查看 复制代码

<transition>

  <table v-if="items.length > 0">

    <!-- ... -->

  </table>

  <p v-else>抱歉，没有找到您查找的内容。</p>

</transition>

如下实例：

[HTML] 纯文本查看 复制代码

<transition>

  <button v-if="isEditing" key="save">

    Save

  </button>

  <button v-else key="edit">

    Edit

  </button>

</transition>

在一些场景中，也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else，

上面的例子可以重写为：

[HTML] 纯文本查看 复制代码

<transition>

  <button v-bind:key="isEditing">

    {{ isEditing ? 'Save' : 'Edit' }}

  </button>

</transition>

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

例如：

[HTML] 纯文本查看 复制代码

<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>

可以重写为：

[HTML] 纯文本查看 复制代码

<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'

    }

  }

}