Vue学习—深入剖析多元素过渡

发布日期：2021-05-08 04:58:08 浏览次数：28 分类：精选文章

本文共 782 字，大约阅读时间需要 2 分钟。

多元素过渡

一、多元素过渡

1.多元素过渡

当切换展示的元素标签名相同时，需要给每一个元素设置不同的key值，否则Vue为了效率只会替换相同标签内部的内容。

在这里插入图片描述

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

2.过渡模式

Vue提供一个一个 mode 特性，可以给多个元素过渡应用不同的模式，mode 的值可为：

in-out：新元素先进行过渡，完成之后当前元素过渡离开。

out-in：当前元素先进行过渡，完成之后新元素过渡进入。

在这里插入图片描述

3.多组件过渡

我们可以使用动态组件切换展示不同的组件。

//App.vue

//demo

//demo-1

//demo-2

在这里插入图片描述

上一篇：Vue学习—深入剖析列表过渡

下一篇：Vue学习—深入剖析单元素过渡

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

推荐文章

【单片机开发】智能小车工程（经验总结） 2021-05-08

【单片机开发】基于stm32的掌上游戏机设计 (项目规划) 2021-05-08

C++&&STL 2021-05-08

子集（LeetCode 78） 2021-05-08

微信js-sdk使用简述（分享，扫码功能等） 2021-05-08

mxsrvs支持thinkphp3.2伪静态 2021-05-08

c++中ifstream及ofstream超详细说明 2021-05-08

vuex modules 2021-05-08

sleep、wait、yield、join——简介 2021-05-08

web项目配置 2021-05-08

基于单片机简易信号误差分析设计-全套资料 2021-05-08

基于单片机简易脉搏测量仪系统设计-毕设课设资料 2021-05-08

Javascript中String支持使用正则表达式的四种方法 2021-05-08

eclipse引用sun.misc开头的类 2021-05-08

Servlet2.5的增删改查功能分析与实现------删除功能（四） 2021-05-08

spring启动错误：Could not resolve placeholder 2021-05-08

查询某表格上次进行vacuum的时间 2021-05-08

invalid byte sequence for encoding 2021-05-08

redis向数组中添加值并查看数组长度 2021-05-08

JS编写一个函数，计算三个不同数字的大小，按从小到大顺序打印（穷举法） 2021-05-08

白红宇的个人博客 - 记录点点滴滴的事 - 您是第 459516370 位访客

多元素过渡

一、多元素过渡

1.多元素过渡

2.过渡模式

3.多组件过渡

发表评论

最新留言

关于作者

推荐文章