lodash.min.js

    1.     <style>
    2.         #my{
    3.             width: 400px; height: 400px;
    4.             border: 2px solid;
    5.         }
    6.         #my div{
    7.             display: inline-block;
    8.             width: 40px; height: 40px;
    9.             box-sizing: border-box;
    10.             border: 1px solid;
    11.             text-align: center;
    12.             line-height: 40px;
    13.         }
    14.         /* 如果transition-group中的列表没有发生新增和删除,只是顺序发生了变化, 那么,就不能使用入场和出场动画,  值用v-move即可实现列表位移动画 */
    15.         .v-move{
    16.             transition: 1s;
    17.         }
    18.     </style>
    19. </head>
    20. <body>
    21.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    22.     <!-- 导入数组插件 -->
    23.     <script src="./lodash.min.js"></script>
    24.     <div id='myApp'>
    25.         <button @click="change">变换</button>
    26.         <!-- transition-group默认被渲染成span标签, 使用tag修改标签为div -->
    27.         <transition-group id="my" tag="div">
    28.             <div v-for="item in list" :key="item">{{item}}</div>
    29.         </transition-group>
    31.     </div>
    32.     <script>
    33.         new Vue({
    34.             el: '#myApp',
    35.             data: {
    36.                 list:[]
    37.             },
    38.             created() {
    39.                 for (let i =0; i< 100; i++) {
    40.                     this.list.push(i)
    41.                 }
    42.             },
    43.             methods: {
    44.                 change(){
    45.                     // 数组长度不变, 顺序变化也会更新视图
    46.                     // this.list.reverse();
    47.                     // 使用插件实现数组乱序
    48.                     this.list = _.shuffle(this.list)
    49.                 }
    50.             },
    51.         })
    52.     </script>
    53. </body>