6-2 6.3实现Vue多元素与多组件过渡ppt课件 Vue.js基础与应用开发实战(微课版).pptx
《6-2 6.3实现Vue多元素与多组件过渡ppt课件 Vue.js基础与应用开发实战(微课版).pptx》由会员分享,可在线阅读,更多相关《6-2 6.3实现Vue多元素与多组件过渡ppt课件 Vue.js基础与应用开发实战(微课版).pptx(15页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、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 trans
2、ition:opacity.5s;6.3.2 相同标签名的多元素切换时实现过渡效果 切换 登录 注册 new Vue(el:#example,data:show:true,)上面的示例代码中两个相同的p元素切换时,无过渡效果。对于具有相同标签名的元素切换的情况,需要通过key属性设置唯一的值来标记以让Vue区分它们。【实例6-8】相同标签名的元素切换时通过key属性实现过渡效果【操作要求】对于具有相同标签名的元素切换时,通过key属性设置唯一的值来标记,实现切换时的过渡效果。【实现过程】创建网页0608.html,在该文件中编写以下代码实现要求的功能。切换 登录 注册【实现过程】var vm=
3、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 快乐学习!高效学习!祝学习进步!
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 6-2 6.3 实现Vue多元素与多组件过渡ppt课件 Vue.js基础与应用开发实战微课版 实现 Vue 多元 组件 过渡 ppt 课件 js 基础 应用 开发 实战 微课版
链接地址:https://www.deliwenku.com/p-90820253.html
限制150内