vue视频教程系列第四十二节-transition-group的应用

介绍

我们上一节课学习了组件，这个组件里只有一个元素，当我们在其里面多加一具元素时，发生了什么？浏览器里并不出现新加的内容。这是为什么呢？因为在vue里，里只能放置一个元素。但是如果我们想在一个过渡效果里放置多个元素时，怎么办呢？用

的key属性：
当我们将改成，发现控制台里依然有错误提示—当里有多个元素时，需要给每个元素设置key值，并且每个key值是不能一样的。设置完后，页面就恢复正常了。

和的区别：

里只能包裹一个元素，而可以包裹多个元素

屏幕快照 2018-10-28 上午8.40.48.png

使用需要注意的点是：

1. 包裹的多个元素必须要设置key值

2. Key值不能设置成一样的

我曾经在刚学习vue时，这上面吃过大亏，使用transition包裹多个元素后，内容一直不能正常显示，好不容易正常显示了，还是出现各种问题，后来认真学习后才发现在这里坑比较多。写出来以供大家参考，防止大家再掉入坑里。

可能我的视频是会罗嗦一些，只是为了让所有刚步入前端学习vue的小伙伴们都能明白。如果有什么建议或者有哪些不懂的地方，欢迎给我留言，只要我会的，我都会第一时间回复。

就到这里了，休息休息一会儿吧：）明天继续加油噢！