<transition-group>介绍
我们上一节课学习了<transition>组件,这个组件里只有一个元素,当我们在其里面多加一具元素时,发生了什么?浏览器里并不出现新加的内容。这是为什么呢?因为在vue里,<transition></transition>里只能放置一个元素。但是如果我们想在一个过渡效果里放置多个元素时,怎么办呢?用
<transition-group></transition-group>
<transition-group>的key属性:
当我们将<transition></transition>改成<transition-group></transition-group>,发现控制台里依然有错误提示—当<transition-group>里有多个元素时,需要给每个元素设置key值,并且每个key值是不能一样的。设置完后,页面就恢复正常了。
<transition>和<transition-group>的区别:
<transition>里只能包裹一个元素,而<transition-group>可以包裹多个元素
使用<transition-group>需要注意的点是:
包裹的多个元素必须要设置key值
Key值不能设置成一样的
我曾经在刚学习vue时,这上面吃过大亏,使用transition包裹多个元素后,内容一直不能正常显示,好不容易正常显示了,还是出现各种问题,后来认真学习后才发现在这里坑比较多。写出来以供大家参考,防止大家再掉入坑里。
可能我的视频是会罗嗦一些,只是为了让所有刚步入前端学习vue的小伙伴们都能明白。如果有什么建议或者有哪些不懂的地方,欢迎给我留言,只要我会的,我都会第一时间回复。
就到这里了,休息休息一会儿吧:)明天继续加油噢!