6-2 6.3实现Vue多元素与多组件过渡ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

6-2 6.3 实现Vue 多元素与多组件过渡教学课件 Vue.js基础与应用开发实战（微课版）6.3 实现Vue多元素与多组件过渡6.3.1 不同标签名的多元素切换时实现过渡效果transition组件在同一时间内只能有一个元素显示，当有多个元素时，不同标签名元素可以使用v-if和v-else来实现过渡效果。6.3.2 相同标签名的多元素切换时实现过渡效果如果是相同标签名的元素切换时，Vue为了提高效率只会替换相同标签内部的内容。例如：.fade-enter,.fade-leave-toopacity:0;.fade-enter-active,.fade-leave-active transition:opacity.5s;6.3.2 相同标签名的多元素切换时实现过渡效果 切换 登录 注册 new Vue(el:#example,data:show:true,)上面的示例代码中两个相同的p元素切换时，无过渡效果。对于具有相同标签名的元素切换的情况，需要通过key属性设置唯一的值来标记以让Vue区分它们。【实例6-8】相同标签名的元素切换时通过key属性实现过渡效果【操作要求】对于具有相同标签名的元素切换时，通过key属性设置唯一的值来标记，实现切换时的过渡效果。【实现过程】创建网页0608.html，在该文件中编写以下代码实现要求的功能。切换 登录 注册【实现过程】var vm=new Vue(el:#app,data:show:true)【实现过程】CSS设置代码如下所示。.fade-enter,.fade-leave-to opacity:0;.fade-enter-active,.fade-leave-active transition:opacity.5s;在有些场景下，也可以通过给同一个元素的key属性设置不同的状态来代替v-if和v-else。例如：Save Edit上面的示例代码可以重写为 isEditing?Save:Edit 使用多个v-if实现多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。例如：Edit Save Cancel可以重写为：buttonMessage computed:buttonMessage:function()switch(this.docState)case saved:return Edit case edited:return Save case editing:return Cancel 快乐学习！高效学习！祝学习进步！