VUE实例 -- 洗牌

最新推荐文章于 2022-03-02 14:10:20 发布

weixin_30335353

最新推荐文章于 2022-03-02 14:10:20 发布

阅读量470

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/patriot/p/7127895.html

版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>VUE实例洗牌</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
        <script src="plug_in/vue2.0.js"></script>
        <style type="text/css">
             #file-demo {
                background: #ccc;
                padding-left: 20px;
                padding-top: 20px;
                padding-bottom: 40px;
                overflow: hidden;
                width: 490px;
            }
            #file-demo li{
            	list-style: none;
                border: 1px solid #fff;
                float: left;
                width: 50px;
                height: 40px;
                text-align: center;
                line-height: 50px;
            }
            .file-move {
                transition: transform 1s;
            }
            .file {
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="file-demo" class="file">
            <h3>洗牌</h3>
            <span>基于VUE列表的位移过渡效果功能和loadash.js的实例</span>
            <button @click="shuffle">shuffle</button>
            <transition-group name="file" tag="p">
                <li v-for="item in items" v-bind:key="item.id">
                    {{ item.number }}
                </li>
            </transition-group>

        </div>
    </body>
    
    <script type="text/javascript">
        var vm=new Vue({
            data: {
                /**
                 * Array.apply()创建数组，并规定数组的长度，map循环便利添加到li里
                 * 
                 */
                items:Array.apply(null, {length: 81}).map(function(_, index){
                    return {
                        id: index,
                        number: index % 9 + 1
                    }
                })
            },
            methods: {
               shuffle:function(){
                    /* 列表位移过渡效果的核心 */
                    this.items = _.shuffle(this.items);
               }
            }
        }).$mount("#file-demo")
    </script>
</html>