使用tag属性把vue组件标签渲染成html原生标签, tag属性和is属性功能恰好相反 

    1.     <style>
    2.         .v-enter, .v-leave-to{
    3.             transform: translate(300px); opacity: 0;
    4.         }
    5.         .v-enter-active, .v-leave-active{
    6.             transition: 1s;
    7.         }
    8.         .v-enter-to, .v-leave{
    9.             transform: translate(0); opacity: 1;
    10.         }
    11.     </style>
    12. </head>
    13. <body>
    14.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    15.     <div id='myApp'>
    16.         <button @click='list.push(count++)'>增加</button>
    17.         <button @click="list.shift()">删除</button>
    18.         <!-- transition-group 用于对多个标签的添加或删除实现动画效果 -->
    19.         <!-- 列表li要求父标签是ul,所以使用tag属性把vue组件标签渲染成html原生标签, tag属性和is属性功能恰好相反 -->
    20.         <transition-group tag="ul">
    21.             <li v-for="item,i in list" :key="item">
    22.                 {{item}}-{{item}}-{{item}}-{{item}}
    23.             </li>
    24.         </transition-group>
    25.         <!-- transition-group 中的v-for循环必须添加key属性, 可以属性值有两个要求
    26.         1: 唯一性, 循环中每一个key值都是唯一的, 互补相同
    27.         2: 不变行, 循环中每一个标签对应的key应是固定的, 不能随数组变化而变化, 所以key值不能是数组索引值,因为数组长度发生变化时, 数组中数据的索引会更新 -->
    28.     </div>
    29.     <script>
    30.         new Vue({
    31.             el: '#myApp',
    32.             data: {
    33.                 count: 0,
    34.                 list: []
    35.             },
    36.             methods: {
    38.             }
    39.         })
    40.     </script>
    41. </body>