之前使用<transition>组件内部只用有一个元素，那么怎么同时渲染整个列表，比如使用 v-for？在这种场景中，需要使用 <transition-group> 组件，关于这个组件有几个特点：

①不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。也可以通过 tag属性更换为其他元素。

②过渡模式不可用，因为我们不再相互切换特有的元素。

③内部元素必须要提供唯一的key属性值。

④CSS过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

<style>
    .list-item {
        display: inline-block;
        margin-right: 10px;
    }
    /*进入过渡生效时的状态和离开过渡生效时的状态*/
    .list-enter-active, .list-leave-active {
        transition: all 1s;
    }
    /*进入过渡时的开始状态和离开过渡时的结束状态*/
    .list-enter, .list-leave-to {
        opacity: 0;
        transform: translateY(30px);
    }
</style>
let APPComponent={
        template:`
           <div>
                <button v-on:click="add">Add</button>
                <button v-on:click="remove">Remove</button>
                <transition-group name="list" tag="p">
                    <span v-for="item in items" v-bind:key="item" class="list-item">
                      {{ item }}
                    </span>
                </transition-group>
           </div>
        `,
        data(){
            return {
                items: [1,2,3,4,5,6,7,8,9],
                nextNum: 10
            }
        },
       methods:{
            //随机数
            randomIndex: function () {
                return Math.floor(Math.random() * this.items.length)
            },
            //在this.items数组内随机位置插入一条数据
            add: function () {
                this.items.splice(this.randomIndex(), 0, this.nextNum++)
            },
            //在this.items数组内随机位置删除一条数据
            remove: function () {
                this.items.splice(this.randomIndex(), 1)
            }
        }
    };